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

Юрий Герук 2025-11-16 24
Возрастная заглушка 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

     

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

    Комментарии