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

Три блока, которые стоят на наших проектах: в подвале — юридический (кто оператор и где его документы) и подпись разработчика, плюс плашка о 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-lg border border-current/10 bg-current/5 p-3 text-xs leading-tight">
    <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:8px;background:color-mix(in srgb, currentColor 5%, transparent);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-lg border border-current/10 bg-current/5 p-2 text-sm leading-tight">
    <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-md 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:8px;background:color-mix(in srgb, currentColor 5%, transparent);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:6px;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, а фон под ней — какой угодно. На светлом сайте с тёмным подвалом это давало нечитаемое — тёмный текст на тёмном фоне. Поэтому у карточки своя поверхность: тёмное стекло, как у тоста. Читается на белом, на тёмном и поверх картинок, и при этом сквозь неё видно сайт.

Как выглядит

Сайт использует cookie

Подробнее

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

Сайт использует cookie

Подробнее

<div id="hixl-cookie" hidden class="fixed inset-x-3 bottom-3 z-50 sm:inset-x-auto sm:right-5 sm:bottom-5 flex max-w-full flex-wrap items-center gap-x-3 gap-y-1.5 rounded-lg border border-white/10 bg-[#141417d9] p-[7px] pl-3.5 text-[13px] leading-snug text-white shadow-[0_14px_38px_-16px_rgba(0,0,0,.7)] backdrop-blur-md backdrop-saturate-150" role="region" aria-label="Уведомление об использовании cookie">
    <p class="m-0 flex-auto text-white/80"><span aria-hidden="true">🍪</span>
        Сайт использует cookie
    </p>
    <span class="ml-auto flex items-center gap-1.5">
        <a href="/privacy" class="rounded-md px-2 py-1.5 text-white/60 no-underline transition-colors hover:bg-white/10 hover:text-white">Подробнее</a>
        <button type="button" class="cursor-pointer rounded-md bg-white px-3.5 py-1.5 font-semibold text-[#141417] transition duration-150 hover:bg-white/90 active:scale-[.97]">Ок</button>
    </span>
</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;y.display='flex';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;width:fit-content;display:none;flex-wrap:wrap;align-items:center;gap:6px 12px;max-width:490px;padding:7px 7px 7px 14px;border:1px solid rgba(255,255,255,.1);border-radius:8px;background:rgba(20,20,23,.85);box-shadow:0 14px 38px -16px rgba(0,0,0,.7);-webkit-backdrop-filter: blur(12px) saturate(1.5);backdrop-filter: blur(12px) saturate(1.5);font-size:13px;line-height:1.4;color:#fff;color-scheme:dark" role="region" aria-label="Уведомление об использовании cookie">
    <p style="margin:0;flex:1 1 auto;color:rgba(255,255,255,.8)"><span aria-hidden="true">🍪</span>
        Сайт использует cookie
    </p>
    <span style="margin-left:auto;display:flex;align-items:center;gap:6px">
        <a href="/privacy" style="padding:6px 8px;border-radius:6px;color:rgba(255,255,255,.6);text-decoration:none">Подробнее</a>
        <button type="button" style="cursor:pointer;padding:6px 14px;border:0;border-radius:6px;background:#fff;font:inherit;font-size:13px;font-weight:600;color:#141417">Ок</button>
    </span>
</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;y.display='flex';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.