Блоки для подвала

Три блока, которые стоят на наших проектах: в подвале — юридический (кто оператор и где его документы) и подпись разработчика, плюс плашка о cookie в углу экрана. Первые два подстраиваются под цвет подвала, плашка живёт со своей тёмной темой — и ничего не требуют добавлять в CSS.

Как выглядит в подвале

ИП Агрызков Антон Сергеевич ОГРНИП 314565809200165 ИНН 562101885524 Политика конфиденциальности Пользовательское соглашение Оферта

Разработка проекта Anton HighExceL

Обращения по персональным данным — support@example.ru

На светлом подвале

Разработка проекта Anton HighExceL

Юридический блок

Оператор, его реквизиты и ссылки на документы одной карточкой. Состав фиксирован и одинаков во всех проектах: политика → соглашение → оферта, различается только тем, сколько слотов заполнено. Согласий в блоке нет — это тексты под конкретными галочками, их место рядом с формой.

Без оферты — там, где не принимаем оплату

ИП Агрызков Антон Сергеевич ОГРНИП 314565809200165 ИНН 562101885524 Политика конфиденциальности Пользовательское соглашение

<div class="inline-flex max-w-full flex-wrap items-stretch gap-x-4 gap-y-3 rounded-2xl border border-current/10 bg-current/5 p-3 text-xs leading-tight shadow-md backdrop-blur-md">
    <span class="flex flex-col justify-center gap-1">
        <span class="font-semibold">ИП Агрызков Антон Сергеевич</span>
        <span class="tabular-nums opacity-70">ОГРНИП 314565809200165</span>
        <span class="tabular-nums opacity-70">ИНН 562101885524</span>
    </span>
    <span class="flex flex-col justify-center gap-1">
        <a href="/privacy" class="text-inherit no-underline opacity-70 transition-opacity hover:underline hover:opacity-100 hover:underline-offset-2">Политика конфиденциальности</a>
        <a href="/terms" class="text-inherit no-underline opacity-70 transition-opacity hover:underline hover:opacity-100 hover:underline-offset-2">Пользовательское соглашение</a>
        <a href="/oferta" class="text-inherit no-underline opacity-70 transition-opacity hover:underline hover:opacity-100 hover:underline-offset-2">Оферта</a>
    </span>
</div>

<style>.hixl-legal{transition:opacity .2s}.hixl-legal:hover{opacity:1;text-decoration:underline;text-underline-offset:2px}</style>
<div style="display:inline-flex;max-width:100%;flex-wrap:wrap;align-items:stretch;column-gap:16px;row-gap:12px;padding:12px;border:1px solid color-mix(in srgb, currentColor 10%, transparent);border-radius:16px;background:color-mix(in srgb, currentColor 5%, transparent);box-shadow:0 4px 14px -6px rgba(0,0,0,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:12px;line-height:1.25;color:inherit">
    <span style="display:flex;flex-direction:column;justify-content:center;gap:4px">
        <span style="font-weight:600">ИП Агрызков Антон Сергеевич</span>
        <span style="font-variant-numeric:tabular-nums;opacity:.7">ОГРНИП 314565809200165</span>
        <span style="font-variant-numeric:tabular-nums;opacity:.7">ИНН 562101885524</span>
    </span>
    <span style="display:flex;flex-direction:column;justify-content:center;gap:4px">
        <a href="/privacy" class="hixl-legal" style="color:inherit;text-decoration:none;opacity:.7">Политика конфиденциальности</a>
        <a href="/terms" class="hixl-legal" style="color:inherit;text-decoration:none;opacity:.7">Пользовательское соглашение</a>
        <a href="/oferta" class="hixl-legal" style="color:inherit;text-decoration:none;opacity:.7">Оферта</a>
    </span>
</div>

Код выше — статические версии на полный состав, для сайтов не на Laravel. В наших проектах блок живёт компонентом <x-hixl-legal /> (раскатка — php artisan legal:rollout): он сам читает config('legal') проекта и показывает только то, что там есть — по именам роутов legal.privacy, legal.terms, legal.oferta, плюс «Удаление аккаунта», если заведён account.delete.show.

Блок разработчика

Подпись автора: аватарка, имя и три канала связи. Ничего не просит — просто говорит, кто сделал сайт, и даёт способ написать. Аватарка и иконки грузятся с hixl.ru, добавлять на сервер нечего.

<div class="inline-flex max-w-full items-center gap-4 rounded-2xl border border-current/10 bg-current/5 p-2 text-sm leading-tight shadow-md backdrop-blur-md">
    <a href="https://hixl.ru" target="_blank" rel="noopener" class="flex items-center gap-3 text-inherit no-underline opacity-80 transition-opacity hover:opacity-100">
        <img src="https://hixl.ru/ava" alt="Anton HighExceL" width="48" height="48" loading="lazy" decoding="async" class="size-12 shrink-0 rounded-xl border border-current/10 object-cover">
        <span>
            <span class="text-xs opacity-70">Разработка проекта</span>
            <span class="block font-semibold">Anton HighExceL</span>
        </span>
    </a>
    <span class="flex items-center gap-1.5">
        <a href="https://hixl.ru/tg" target="_blank" rel="noopener" title="Написать в Telegram" class="flex size-8 items-center justify-center opacity-50 transition hover:scale-110 hover:opacity-100">
            <img src="https://hixl.ru/img/tg.svg" alt="Telegram" width="32" height="32" loading="lazy" decoding="async" class="size-8">
        </a>
        <a href="https://hixl.ru/vk" target="_blank" rel="noopener" title="Написать в VK" class="flex size-8 items-center justify-center opacity-50 transition hover:scale-110 hover:opacity-100">
            <img src="https://hixl.ru/img/vk.svg" alt="VK" width="32" height="32" loading="lazy" decoding="async" class="size-8">
        </a>
        <a href="https://hixl.ru/max" target="_blank" rel="noopener" title="Написать в MAX" class="flex size-8 items-center justify-center opacity-50 transition hover:scale-110 hover:opacity-100">
            <img src="https://hixl.ru/img/max.svg" alt="MAX" width="32" height="32" loading="lazy" decoding="async" class="size-8">
        </a>
    </span>
</div>

<style>.hixl-dev{opacity:.5;transition:opacity .2s,transform .2s}.hixl-dev:hover{opacity:1;transform:scale(1.1)}</style>
<div style="display:inline-flex;max-width:100%;align-items:center;gap:16px;padding:8px;border:1px solid color-mix(in srgb, currentColor 10%, transparent);border-radius:16px;background:color-mix(in srgb, currentColor 5%, transparent);box-shadow:0 4px 14px -6px rgba(0,0,0,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:14px;line-height:1.25;color:inherit">
    <a href="https://hixl.ru" target="_blank" rel="noopener" style="display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;opacity:.8">
        <img src="https://hixl.ru/ava" alt="Anton HighExceL" width="48" height="48" loading="lazy" decoding="async" style="display:block;width:48px;height:48px;flex:none;border:1px solid color-mix(in srgb, currentColor 10%, transparent);border-radius:12px;object-fit:cover">
        <span>
            <span style="font-size:12px;opacity:.7">Разработка проекта</span>
            <span style="display:block;font-weight:600">Anton HighExceL</span>
        </span>
    </a>
    <span style="display:flex;align-items:center;gap:6px">
        <a href="https://hixl.ru/tg" target="_blank" rel="noopener" title="Написать в Telegram" class="hixl-dev" style="display:flex;width:32px;height:32px;align-items:center;justify-content:center">
            <img src="https://hixl.ru/img/tg.svg" alt="Telegram" width="32" height="32" loading="lazy" decoding="async" style="display:block;width:32px;height:32px">
        </a>
        <a href="https://hixl.ru/vk" target="_blank" rel="noopener" title="Написать в VK" class="hixl-dev" style="display:flex;width:32px;height:32px;align-items:center;justify-content:center">
            <img src="https://hixl.ru/img/vk.svg" alt="VK" width="32" height="32" loading="lazy" decoding="async" style="display:block;width:32px;height:32px">
        </a>
        <a href="https://hixl.ru/max" target="_blank" rel="noopener" title="Написать в MAX" class="hixl-dev" style="display:flex;width:32px;height:32px;align-items:center;justify-content:center">
            <img src="https://hixl.ru/img/max.svg" alt="MAX" width="32" height="32" loading="lazy" decoding="async" style="display:block;width:32px;height:32px">
        </a>
    </span>
</div>

В наших проектах — компонент <x-hixl-dev /> (раскатка — php artisan credit:rollout). Адреса — vanity-роуты hixl.ru: аккаунт переезжает — правится один файл здесь, а не подвалы всех проектов.

Плашка о cookie

Карточка в углу экрана: заголовок, строка о cookie, кнопка «Принять» и ссылка на политику. Ничего не блокирует — в России от такой плашки требуется сообщить о сборе cookie и дать ссылку на политику, а не останавливать аналитику до согласия, как в ЕС по GDPR. Поэтому и формулировка конклюдентная: «продолжая пользоваться сайтом».

Отметка о прочтении живёт в localStorage, бэкенд не нужен. Скрипт — одна строка на чистом JS без Alpine: тот же код работает и в статических проектах. Если политики в проекте нет, текст сокращается и кнопка «Подробнее» не выводится — соглашаться не с чем.

Тема у плашки своя, а не от страницы. Два блока выше стоят внутри подвала и красятся от его текста, а плашка висит поверх контента: цвет она наследовала бы от body, а фон под ней — какой угодно. На светлом сайте с тёмным подвалом это давало нечитаемое — тёмный текст на тёмном фоне. Поэтому у карточки своя поверхность: тёмное стекло, как у тоста. Читается на белом, на тёмном и поверх картинок, и при этом сквозь неё видно сайт.

Как выглядит

На светлой странице — та же карточка

<div id="hixl-cookie" hidden class="fixed inset-x-3 bottom-3 z-50 sm:inset-x-auto sm:right-5 sm:bottom-5 max-w-full rounded-2xl border border-white/12 bg-[#18181b]/75 [background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0))] p-4 text-[13px] leading-relaxed text-white shadow-[0_20px_56px_-16px_rgba(0,0,0,.7),0_0_0_1px_rgba(255,255,255,.05),inset_0_1px_0_rgba(255,255,255,.1)] backdrop-blur-xl backdrop-saturate-150 sm:w-[22rem]" role="region" aria-label="Уведомление об использовании cookie">
    <p class="flex items-center gap-2 font-semibold text-white"><span class="text-base leading-none" aria-hidden="true">🍪</span>Файлы cookie</p>
    <p class="mt-1.5 mb-0 text-white/75">
        Нужны для работы сайта и аналитики. Продолжая, вы соглашаетесь с политикой конфиденциальности.
    </p>
    <div class="mt-3.5 flex items-center gap-2">
        <button type="button" class="flex-1 cursor-pointer rounded-xl bg-white px-4 py-2 font-semibold text-[#18181b] shadow-[0_8px_20px_-8px_rgba(255,255,255,.35)] transition duration-150 hover:bg-white/90 active:scale-[.98] active:bg-white/80">Принять</button>
        <a href="/privacy" class="shrink-0 rounded-xl px-3 py-2 text-white/65 no-underline transition-colors hover:bg-white/10 hover:text-white">Подробнее</a>
    </div>
</div>
<script>try{if(!localStorage.getItem('hixl-cookie-ack')){var c=document.getElementById('hixl-cookie'),y=c.style;y.opacity=0;y.transform='translateY(10px)';c.hidden=false;requestAnimationFrame(function(){y.transition='opacity .3s ease,transform .3s ease';y.opacity=1;y.transform='none'});c.querySelector('button').onclick=function(){try{localStorage.setItem('hixl-cookie-ack','1')}catch(e){}y.opacity=0;y.transform='translateY(10px) scale(.98)';setTimeout(function(){c.remove()},300)}}}catch(e){}</script>

<div id="hixl-cookie" hidden style="position:fixed;left:12px;right:12px;bottom:12px;z-index:50;margin-left:auto;max-width:352px;padding:16px;border:1px solid rgba(255,255,255,.12);border-radius:16px;background-color:rgba(24,24,27,.75);background-image:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0));box-shadow:0 20px 56px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 rgba(255,255,255,.1);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);font-size:13px;line-height:1.5;color:#fff;color-scheme:dark" role="region" aria-label="Уведомление об использовании cookie">
    <p style="display:flex;align-items:center;gap:8px;margin:0;font-weight:600;color:#fff"><span style="font-size:16px;line-height:1" aria-hidden="true">🍪</span>Файлы cookie</p>
    <p style="margin:6px 0 0;color:rgba(255,255,255,.75)">
        Нужны для работы сайта и аналитики. Продолжая, вы соглашаетесь с политикой конфиденциальности.
    </p>
    <div style="display:flex;align-items:center;gap:8px;margin-top:14px">
        <button type="button" style="flex:1;cursor:pointer;padding:8px 16px;border:0;border-radius:12px;background:#fff;box-shadow:0 8px 20px -8px rgba(255,255,255,.35);font:inherit;font-size:13px;font-weight:600;color:#18181b">Принять</button>
        <a href="/privacy" style="flex:none;padding:8px 12px;border-radius:12px;color:rgba(255,255,255,.65);text-decoration:none">Подробнее</a>
    </div>
</div>
<script>try{if(!localStorage.getItem('hixl-cookie-ack')){var c=document.getElementById('hixl-cookie'),y=c.style;y.opacity=0;y.transform='translateY(10px)';c.hidden=false;requestAnimationFrame(function(){y.transition='opacity .3s ease,transform .3s ease';y.opacity=1;y.transform='none'});c.querySelector('button').onclick=function(){try{localStorage.setItem('hixl-cookie-ack','1')}catch(e){}y.opacity=0;y.transform='translateY(10px) scale(.98)';setTimeout(function(){c.remove()},300)}}}catch(e){}</script>

В наших проектах — компонент <x-hixl-cookie /> (раскатка — php artisan cookie:rollout), подключается один раз в общий layout перед </body>. Ключ отметки в localStorage единый — hixl-cookie-ack: прежние самодельные плашки расходились в написании, и закрытая на одном проекте всплывала на другом.

Нужен не блок, а проект? Напишите в Telegram.