itube-specs 0.0.1074 → 0.0.1075

package/SITE_UPDATES.md

@@ -11,6 +11,20 @@
 коммиты до бампа); `npm run patch` сам проставит ей номер версии. Формат пункта: что сделать и где,
 кому именно (всем / сайтам с N), что будет, если не сделать.
 
+## 0.0.1075 — 2026-11-06
+
+- **Сайтам со своей темой в `assets/scss/vars/_theme.scss` (hdsex-remaster), срочно:** без нового токена сборка
+  падает на `Undefined variable`. Добавить `$layout-age-popup-text` (тёмная — `$color-zinc-400`, светлая —
+  `$color-gray-600`), `$ui-img-gate-badge-text: $color-white;`, `$ui-img-gate-badge-bg: $color-black-42;`,
+  `$ui-img-gate-badge-border: $mono-white-90;`. Шесть `$layout-age-banner-*` и `$ui-img-gate-text` больше не
+  нужны — удалить.
+- **Сайтам с `FeatureAgeVerificationEnabled` — к сведению:** заглушка превью — размытая абстрактная картинка слоя
+  (`public/img/age-gate.webp`, без реального кадра) со значком «18+» в кружке; в аватарах меньше 40px — без значка.
+- **Сайтам с `FeatureAgeVerificationEnabled` — к сведению:** плашка под шапкой (`LayoutAgeBanner`) заменена попапом
+  `LayoutAgePopup` — предупреждение о верификации в регионе, кнопки «Verify age» и «Close»; после закрытия
+  показывается снова на следующей странице. Заглушки превью и блокировка плеера — как были. Тексты `age_gate.title`
+  и `age_gate.text` переписаны под попап.
+
 ## 0.0.1074 — 2026-11-05
 
 - **Сайтам со своей темой в `assets/scss/vars/_theme.scss` (hdsex-remaster), срочно:** без новых токенов сборка

package/assets/scss/themes/dark/_theme.scss

@@ -33,14 +33,11 @@ $layout-header-border: $color-zinc-800-30;
 $layout-nav-border: $color-zinc-800-50;
 $layout-skip-link-bg: $color-zinc-800-60;
 $layout-skip-link-text: $color-white;
-$layout-age-banner-bg: $color-emerald-600;
-$layout-age-banner-title: $color-white;
-$layout-age-banner-text: $color-white-90;
-$layout-age-banner-btn-bg: $color-white;
-$layout-age-banner-btn-bg--hover: $color-white-90;
-$layout-age-banner-btn-text: $color-green-900;
+$layout-age-popup-text: $color-zinc-400;
 $ui-img-gate-bg: $color-zinc-800;
-$ui-img-gate-text: $color-zinc-500;
+$ui-img-gate-badge-text: $color-white;
+$ui-img-gate-badge-bg: $color-black-42;
+$ui-img-gate-badge-border: $mono-white-90;
 
 // ─── Page footer links (mixin) ───
 $page-footer-links-border: $color-zinc-800;

package/assets/scss/themes/light/_theme.scss

@@ -44,14 +44,11 @@ $layout-header-border: transparent;
 $layout-nav-border: $color-slate-750;
 $layout-skip-link-bg: $color-slate-750;
 $layout-skip-link-text: $color-white;
-$layout-age-banner-bg: $color-emerald-600;
-$layout-age-banner-title: $color-white;
-$layout-age-banner-text: $color-white-90;
-$layout-age-banner-btn-bg: $color-white;
-$layout-age-banner-btn-bg--hover: $color-white-90;
-$layout-age-banner-btn-text: $color-green-900;
+$layout-age-popup-text: $color-gray-600;
 $ui-img-gate-bg: $color-gray-200;
-$ui-img-gate-text: $color-gray-500;
+$ui-img-gate-badge-text: $color-white;
+$ui-img-gate-badge-bg: $color-black-42;
+$ui-img-gate-badge-border: $mono-white-90;
 
 // ─── Page footer links (mixin) ───
 $page-footer-links-border: transparent;

package/components/layout/age-popup.vue

@@ -0,0 +1,81 @@
+<!-- Попап на каждой странице, пока возрастная верификация требуется и не пройдена (useAgeGate) -->
+<template>
+  <transition mode="out-in">
+    <UiPopup
+      v-if="isOpen"
+      v-model="isOpen"
+      sheet
+    >
+      <template #title>{{ t('age_gate.title') }}</template>
+
+      <p class="layout-age-popup__text">{{ t('age_gate.text') }}</p>
+
+      <template #footer>
+        <div class="layout-age-popup__buttons">
+          <UiBtn
+            wide
+            size="l"
+            theme="secondary"
+            @click="isOpen = false"
+          >{{ t('close') }}</UiBtn>
+          <UiBtn
+            :disabled="isPending"
+            wide
+            size="l"
+            theme="primary"
+            @click="onVerify"
+          >{{ t('age_gate.button') }}</UiBtn>
+        </div>
+      </template>
+    </UiPopup>
+  </transition>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n();
+const route = useRoute();
+const { startVerification } = useAgeGate();
+
+const isOpen = ref(true);
+const isPending = ref(false);
+
+watch(() => route.path, () => {
+  isOpen.value = true;
+});
+
+const onVerify = async () => {
+  isPending.value = true;
+  try {
+    await startVerification(route.fullPath);
+  } finally {
+    isPending.value = false;
+  }
+};
+</script>
+
+<style lang="scss">
+.layout-age-popup__text {
+  @include font-sm;
+
+  max-width: 400px;
+  padding-inline: 8px;
+  padding-block: 8px;
+  color: $layout-age-popup-text;
+
+  @include from-br(sm) {
+    @include font-base;
+
+    padding-inline: 16px;
+    padding-block: 16px;
+  }
+}
+
+.layout-age-popup__buttons {
+  display: grid;
+  gap: 8px;
+
+  @include from-br(sm) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+</style>

package/components/ui/img.vue

@@ -125,29 +125,53 @@ const emit = defineEmits<{
 .ui-img-gate {
   container-type: inline-size;
   background-color: $ui-img-gate-bg;
+  background-image: url('/img/age-gate.webp');
+  background-position: center;
+  background-size: cover;
 }
 
 .ui-img-gate__label {
-  @include font-lg;
+  @include font-base;
 
   position: absolute;
-  inset: 0;
+  top: 50%;
+  left: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 700;
-  color: $ui-img-gate-text;
+  width: 56px;
+  height: 56px;
+  font-weight: 800;
+  letter-spacing: var(--tracking-tight);
+  color: $ui-img-gate-badge-text;
+  background-color: $ui-img-gate-badge-bg;
+  border: 2px solid $ui-img-gate-badge-border;
+  border-radius: $radius-full;
+  transform: translate(-50%, -50%);
 }
 
-@include to-cq(160px) {
+@include to-cq(240px) {
   .ui-img-gate__label {
     @include font-xs;
+
+    width: 40px;
+    height: 40px;
   }
 }
 
-@include to-cq(56px) {
+@include to-cq(96px) {
   .ui-img-gate__label {
     @include font-4xs;
+
+    width: 26px;
+    height: 26px;
+    border-width: 1px;
+  }
+}
+
+@include to-cq(40px) {
+  .ui-img-gate__label {
+    display: none;
   }
 }
 </style>

package/i18n/locales/en-US.json

@@ -3,8 +3,8 @@
   "register_to_upload": "Please sign up or log in to upload your videos",
   "age_gate": {
     "thumb": "18+",
-    "title": "Laws in your region require age verification to view 18+ content",
-    "text": "Takes a minute, and we keep no personal data",
+    "title": "Age verification required",
+    "text": "Laws in your country or region require you to confirm you are 18+ to view adult content. It takes a minute, and we keep no personal data.",
     "button": "Verify age",
     "player_text": "Confirm your age to watch this video"
   },

package/layouts/default.vue

@@ -12,7 +12,9 @@
 
       <LayoutSecondNav class="_to-sd"/>
 
-      <LayoutAgeBanner/>
+      <ClientOnly>
+        <LazyLayoutAgePopup v-if="isAgeGated"/>
+      </ClientOnly>
 
       <main
         id="main"
@@ -60,5 +62,7 @@ const { snackbarText, isSnackBarInPopup } = useSnackbar();
 
 const { isAuthorized } = useUser(AuthorizationApiService);
 
+const { isAgeGated } = useAgeGate();
+
 const htmlAttrs = computed(() => head.value.htmlAttrs);
 </script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "itube-specs",
   "type": "module",
-  "version": "0.0.1074",
+  "version": "0.0.1075",
   "main": "./nuxt.config.ts",
   "types": "./types/index.d.ts",
   "scripts": {

package/components/layout/age-banner.vue

@@ -1,108 +0,0 @@
-<!-- Плашка под шапкой, пока возрастная верификация требуется и не пройдена (useAgeGate) -->
-<template>
-  <section
-    v-if="isAgeGated"
-    class="layout-age-banner"
-  >
-    <div class="layout-age-banner__inner _container">
-      <p class="layout-age-banner__content">
-        <strong class="layout-age-banner__title">{{ t('age_gate.title') }}</strong>
-        <span class="layout-age-banner__text">{{ t('age_gate.text') }}</span>
-      </p>
-      <UiBtn
-        :disabled="isPending"
-        :title="t('age_gate.button')"
-        theme="primary"
-        size="l"
-        class="layout-age-banner__btn"
-        @click="onVerify"
-      >{{ t('age_gate.button') }}</UiBtn>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-const { t } = useI18n();
-const route = useRoute();
-const { isAgeGated, startVerification } = useAgeGate();
-
-const isPending = ref(false);
-
-const onVerify = async () => {
-  isPending.value = true;
-  try {
-    await startVerification(route.fullPath);
-  } finally {
-    isPending.value = false;
-  }
-};
-</script>
-
-<style lang="scss">
-.layout-age-banner {
-  position: sticky;
-  top: var(--header-height);
-  z-index: calc(#{$z-index-header} - 2);
-  padding-block: 10px;
-  background-color: $layout-age-banner-bg;
-
-  @include from-br($brkpnt-burger) {
-    $layout-nav-height: 59px;
-
-    top: calc(var(--header-height) + #{$layout-nav-height});
-    padding-block: 12px;
-  }
-}
-
-.layout-age-banner__inner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  text-align: center;
-
-  @include from-br(sm) {
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 32px;
-    text-align: left;
-  }
-}
-
-.layout-age-banner__content {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.layout-age-banner__title {
-  @include font-base;
-
-  font-weight: 700;
-  color: $layout-age-banner-title;
-
-  @include from-br(sm) {
-    @include font-lg;
-  }
-}
-
-.layout-age-banner__text {
-  @include font-sm;
-
-  color: $layout-age-banner-text;
-
-  @include from-br(sm) {
-    @include font-base;
-  }
-}
-
-.layout-age-banner__btn {
-  --button-bg: #{$layout-age-banner-btn-bg};
-  --button-bg--hover: #{$layout-age-banner-btn-bg--hover};
-  --button-text: #{$layout-age-banner-btn-text};
-  --button-border: transparent;
-
-  flex-shrink: 0;
-  font-weight: 700;
-}
-</style>