Возрастная заглушка 18+ для сайтов uCoz

Юрий Герук 2025-11-16 139
Возрастная заглушка 18+ для сайтов uCoz

Возрастная заглушка 18+ нужна на сайтах, где размещён контент только для взрослых. В системе uCoz подобного механизма нет, поэтому его создают вручную через HTML, CSS и JavaScript. Готовый скрипт показывает модальное окно с подтверждением возраста, блокирует доступ несовершеннолетним и запоминает выбор через cookie.

Что делает скрипт

  • показывает окно при первом посещении сайта
  • размывает фон и отключает взаимодействие с содержимым
  • предлагает выбор «Мне есть 18» и «Мне нет 18»
  • сохраняет подтверждение возраста в cookie
  • скрывает окно при следующих посещениях
  • перенаправляет несовершеннолетних на указанную страницу
  • работает на всех страницах и во всех модулях uCoz

Принцип работы

  • скрипт проверяет cookie age_verified_18
  • если значение не найдено, выводится окно
  • выбор «Мне есть 18» создаёт cookie и снимает блокировку
  • выбор «Мне нет 18» выполняет переход по указанному адресу
  • срок действия cookie можно изменить

Полный код заглушки 18+

Код вставляется полностью и включает HTML, стили и JavaScript:

<!-- Заглушка 18+ -->
<div class="age-gate-overlay" id="ageGate">
 <div class="age-gate-modal">
 <div class="age-gate-title">Сайт доступен только для взрослых</div>

 <div class="age-gate-text">
 На сайте размещён контент категории 18+. 
 Продолжая просмотр, вы подтверждаете достижение 18 лет 
 и принимаете ответственность за дальнейшее посещение ресурса.
 </div>

 <div class="age-gate-buttons">
 <button type="button" class="age-gate-btn age-gate-btn-yes" id="ageGateYes">
 Мне есть 18
 </button>
 <button type="button" class="age-gate-btn age-gate-btn-no" id="ageGateNo">
 Мне нет 18
 </button>
 </div>

 <div class="age-gate-note">
 Если вам нет 18 лет, покиньте страницу.
 </div>
 </div>
</div>

<style>
 body.age-gate-blur > *:not(#ageGate) {
 filter: blur(8px);
 pointer-events: none;
 user-select: none;
 transition: filter 0.3s ease;
 }

 .age-gate-overlay {
 position: fixed;
 inset: 0;
 display: none;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.45);
 backdrop-filter: blur(3px);
 z-index: 99999;
 padding: 1rem;
 }

 .age-gate-modal {
 max-width: 480px;
 width: 100%;
 background: var(--bs-body-bg, #121212);
 color: var(--bs-body-color, #f8f9fa);
 border-radius: 1rem;
 box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
 padding: 2rem 1.75rem 1.5rem;
 font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 animation: ageFade 0.25s ease;
 }

 @keyframes ageFade {
 from {
 opacity: 0;
 transform: translateY(8px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }

 .age-gate-title {
 font-size: 1.4rem;
 font-weight: 700;
 margin-bottom: 1rem;
 text-align: center;
 }

 .age-gate-text {
 font-size: 0.95rem;
 line-height: 1.6;
 margin-bottom: 1.5rem;
 }

 .age-gate-buttons {
 display: flex;
 gap: 0.75rem;
 justify-content: center;
 margin-bottom: 1rem;
 flex-wrap: wrap;
 }

 .age-gate-btn {
 cursor: pointer;
 border: none;
 border-radius: 999px;
 padding: 0.65rem 1.4rem;
 font-size: 0.95rem;
 font-weight: 600;
 transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease, color 0.12s ease;
 min-width: 150px;
 }

 .age-gate-btn-yes {
 background: #0d6efd;
 color: #ffffff;
 box-shadow: 0 6px 18px rgba(13, 110, 253, 0.5);
 }

 .age-gate-btn-yes:hover {
 transform: translateY(-1px);
 box-shadow: 0 10px 26px rgba(13, 110, 253, 0.65);
 }

 .age-gate-btn-no {
 background: transparent;
 color: #f8f9fa;
 border: 1px solid rgba(248, 249, 250, 0.4);
 }

 .age-gate-btn-no:hover {
 background: rgba(248, 249, 250, 0.08);
 }

 .age-gate-note {
 font-size: 0.8rem;
 color: #adb5bd;
 text-align: center;
 }

 body.age-gate-lock {
 overflow: hidden;
 }
</style>

<script>
 (function () {
 var AGE_COOKIE_NAME = "age_verified_18";
 var AGE_COOKIE_VALUE = "1";
 var AGE_COOKIE_MAX_AGE = 86400;
 var REDIRECT_URL_UNDER_18 = "https://yandex.ru";

 function getCookie(name) {
 var matches = document.cookie.match(
 new RegExp("(^|; )" + name.replace(/([.$?*|{}()[\\]\\/+\^])/g, "\\$1") + "=([^;]*)")
 );
 return matches ? decodeURIComponent(matches[2]) : null;
 }

 function setCookie(name, value, maxAge) {
 document.cookie =
 encodeURIComponent(name) +
 "=" +
 encodeURIComponent(value) +
 "; max-age=" +
 maxAge +
 "; path=/";
 }

 function showAgeGate() {
 var gate = document.getElementById("ageGate");
 var yesBtn = document.getElementById("ageGateYes");
 var noBtn = document.getElementById("ageGateNo");

 gate.style.display = "flex";
 document.body.classList.add("age-gate-blur", "age-gate-lock");

 yesBtn.addEventListener("click", function () {
 setCookie(AGE_COOKIE_NAME, AGE_COOKIE_VALUE, AGE_COOKIE_MAX_AGE);
 gate.style.display = "none";
 document.body.classList.remove("age-gate-blur", "age-gate-lock");
 });

 noBtn.addEventListener("click", function () {
 window.location.href = REDIRECT_URL_UNDER_18;
 });
 }

 document.addEventListener("DOMContentLoaded", function () {
 if (getCookie(AGE_COOKIE_NAME) === AGE_COOKIE_VALUE) {
 return;
 }
 showAgeGate();
 });
 })();
</script>

Куда вставлять код на uCoz

Лучшее и наиболее универсальное место:

Глобальные блоки → Нижняя часть сайта

Так заглушка подключается:

  • на всех страницах
  • после загрузки основного контента
  • без конфликтов с модульными шаблонами
  • без влияния на скорость рендера

Альтернативный вариант:

Глобальные блоки → Верхняя часть сайта

Используется, если нужно показать окно максимально рано.

Настройки в коде

Срок действия cookie

var AGE_COOKIE_MAX_AGE = 86400;

Можно увеличить, умножив значение на нужное количество дней.

Ссылка для несовершеннолетних

var REDIRECT_URL_UNDER_18 = "https://yandex.ru";

Можно указать любую страницу.

Для каких сайтов подходит

  • проекты с контентом 18+
  • магазины товаров для взрослых
  • сайты с алкоголем или табачной продукцией
  • разделы с медицинской или чувствительной информацией
  • страницы, на которые нужно ограничить доступ по возрасту

Заключение

Заглушка 18+ — простой и надёжный способ ограничить доступ к взрослому контенту на сайте uCoz. Скрипт не требует доработок системы, работает во всех модулях и легко настраивается под конкретные задачи. Достаточно вставить готовый код в глобальный блок и при необходимости изменить срок действия cookie или страницу перенаправления. Такой подход обеспечивает базовую защиту и улучшает соблюдение возрастных требований на сайте.

Оцените полезность материала!

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Комментарии