ANKU

Если по закону и по судебной практике РФ, то аналитические и рекламные скрипты должны загружаться только после согласия.

Без согласия могут работать только обязательные для работы ресурса, типа авторизации на сайте, корзина.
Скрипты типа Яндекс метрики работают сразу, поэтому надо проверять согласие, на основании ответа подключать необходимые скрипты. В GA4 есть Consent Mode, он позволяет скрипту присутствовать в DOM, но работать в ограниченном режиме, пока не получит согласие от пользователя.

То есть, обязательные, те что нужны для работы сайта - они включены всегда, тем более у вас сайт на конструкторе, там предусмотрены эти моменты.

Если хочешь обезопасить себя на 100% то сделай логику типа:

if (cookieConsent.analytics === true) {
    loadScript('https://mc.yandex.ru/metrika/tag.js');
}
if (cookieConsent.marketing === true) {
    loadScript('https://www.facebook.com/tr?id=...');
}

Что такое аналитические, а что такое рекламные пиксели:
Аналитические - это Яндекс метрика и GA, прочие аналоги для анализа и аналитики, типа роистат.
Рекламные - это VK Ads пиксель, Facebook/Meta, TikTok, Google Ads remarketing tag, любые DMP, retargeting-теги.

На тему колтрекинга, онлайн-чатов, CRM и тп:

1. Например, Calltouch, Callibri - это аналитика, т.к. учитывают поведение, канал входа, используют куки
   
2. Jivo и подобные - аналитика функциональные, пишут логи, могут использовать куки
   
3. Битрикс24 - это аналитика и реклама, т.к. уже передает данные в CRM
   

Вобще, чаты и прочее, скорее относится к функциональным, т.к. вызываются действием пользователя, например кнопкой "Начать чат с менеджером", то есть юзер сам по факту принимает решение.

Согласие пишется в куку или в локалсторадж.
Чтобы не показывать баннер с выбором повторно и управлять загрузкой скриптов при переходе по внутренним страницам.

ИТОГО

Какие действия должны происходить на сайте, когда пользователь выбирает вид используемых cookie?

• Записать вариант согласия в куки или локалсторадж
  
• На основании выбора загружать или не загружать скрипты
  

Можно ли как в их варианте сделать так, что обязательные по умолчанию включены всегда?

Да, они итак работают поумолчанию и без согласия. Видимо в рамках конструктора нет варианта убрать кнопку из стандартного блока, поэтому проще написать блок и логику самостоятельно.

Аналитические - это коды Метрики и Google Analitycs?

Да, это аналитические инструменты

Если пользователь поставит запрет, то счетчики на странице не должны подключаться?

С точки зрения закона РФ - да, но есть исключение в виде GA4, но лучше перестраховаться и делать все в рамках 1й логики - подключать скрипт при согласии.

Рекламные - это коды "пикселей"? И при отключении они тоже не должны выводиться в коде страницы?

Да - аналогично аналитическим, вель при подключении скрипт начинает работу сразу.

К какому типу относятся коллтрекинги и коды онлайн консультантов и, например, "открытые линии" битрикс24?

1. Колтрекинг - это аналитика*
   
2. Чат - функциональный скрипт, который не требует согласия**
   

*Но не всегда, если они используют куки или передают ID, то лучше отнести это к аналитике, тут надо смотреть в рамках отдельного выбранного сервиса.
**Чат в целом можно отнести к функциональным, если он загружается не автоматически, а при вызове по действию пользователя, например, "Начать чат с сотрудником" - тут загружаем скрипт чата.

И выбор пользователя по факту тоже записывается в cookie?

Да, для того, чтобы не выводить баннер при каждом посещении или переходам по внутренним ссылкам, в рамках удобства использования ресурса, так же определять работу скриптов на основании этой записи.

vite-plugin-prerender
Ставишь, добавляешь в конфиг и делаешь сборку
Или vite-plugin-ssr, только в конфиге поставь ssr({ prerender: true })

Да, возможно, гугли masonry

Оберни эти 2 дива одним дивом, потом новому родителю допили стили
Код вставляй через Настройки сайта

function wrapElements(selectors, wrapperTag = 'div', wrapperClass) {
  const elems = selectors
    .map(sel => document.querySelector(sel))
    .filter(el => el !== null);
  if (elems.length < 2) {
    console.warn('Не все элементы найдены');
    return null;
  }
  const parent = elems[0].parentNode;
  if (!elems.every(el => el.parentNode === parent)) {
    console.warn('Элементы не соседи');
    return null;
  }
  const children = Array.from(parent.children);
  const sorted = elems.slice().sort(
    (a, b) => children.indexOf(a) - children.indexOf(b)
  );
  const wrapper = document.createElement(wrapperTag);
  if (wrapperClass) wrapper.classList.add(wrapperClass);
  parent.insertBefore(wrapper, sorted[0]);
  sorted.forEach(el => wrapper.appendChild(el));
  return wrapper;
}
wrapElements(['.div-1', '.div-2'], 'div', 'my-wrapper');

Сверстать карточки руками
Забиваешь товары в поток, подцепляешься к апи товаров, вставляешь свою верстку в js, выводишь данные на клиенте (собственно так тильда и делает). В своей верстке просто на кнопку вызываешь форму, через js передаешь параметры товара (цена/название), а не корзину (хотя корзина та же форма, просто чисти ее при закрытии), тем более что ты собрался передавать название товара в форму, а корзина это делает поумолчанию)))

Держи, скопируй в Т123


Или вот покороче вариант

<script src="https://cdn.jsdelivr.net/gh/shiza7872/My-First-Project/Fluid.js"></script>

<style>
  #renderSurface {
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
  }
</style>
<canvas id="renderSurface"></canvas>

<script>
  const canvas = document.getElementById('renderSurface');
  let myFluid = new Fluid(canvas);
  myFluid.activate();
</script>

Чтобы дать точный ответ, надо увидеть макет формы.
Но должно быть что-то типа
V1 - jQuery

$(document).ready(() => {
  // Все элементы с классом img-N
  $('[class*="img-"]').on('click', function() {
    const $img = $(this);
    // Среди классов img-<число>
    const imgClass = $img.attr('class')
      .split(/\s+/)
      .find(c => /^img-\d+$/.test(c));
    if (!imgClass) return;

    const idx = imgClass.split('-')[1];
    const $checkbox = $(`input[name="check-${idx}"]`);
    if (!$checkbox.length) return;

    // Тогглим класс и состояние чекбокса
    const isActive = $img.toggleClass('active').hasClass('active');
    $checkbox.prop('checked', isActive);
  });
});

V2 - Vanilla

document.addEventListener('DOMContentLoaded', () => {
  // Все элементы с классом img-N
  const images = document.querySelectorAll('[class*="img-"]');

  images.forEach(img => {
    img.addEventListener('click', () => {
      // Класс вида img-N
      const imgClass = img.className
        .split(/\s+/)
        .find(c => /^img-\d+$/.test(c));
      if (!imgClass) return;

      const idx = imgClass.split('-')[1];
      const checkbox = document.querySelector(`input[name="check-${idx}"]`);
      if (!checkbox) return;

      // Тогглим класс и состояние чекбокса
      const isActive = img.classList.toggle('active');
      checkbox.checked = isActive;
    });
  });
});

Тильдовскую капчу дернуть не получится прямым способом, придется накостылить, типа поставить форму, дать ей d-none, на клик по "показать номер" повесить сабмит скрытой формы, если форма отправится, то показать номер, либо форма выявит подозрительную активность и выплюнет родную капчу, в этот момент можно будет отправить событие, например в метрику, что капча сработала, если ее ввели, так же можно отправить событие.

Из текста вопроса не понял, капчу показывать каждый раз при запросе номера или нет?
Нужна v2 или v3
Какая цель сего действа?
Ну и пи своей капче надо сервер, чтоб валидировать токен
Ну и телефоны там же в дб хранить, чтоб отдавать во фронт
Если будешь хранить в html, типа в base64, например , то любой бот, который запускает js, моментально декодирует его, тем более если бот будет кликать по js кнопке "показать номер"

Вопрос ты задал не совсем правильно, но кажется я понял в чем суть))
Тебе необходимо, чтобы слайдер был в рамказ стандартного контейнера, а не на всю ширину окна браузера.
В примере по ссылке есть строчка [class*="uc-run-logo"] .t774__container
там определена ширина контейнера max-width: calc(100vw - var(--dbmSliderRunPadding) * 2);
Впиши вместо этого

[class*="uc-run-logo"] .t774__container {
  max-width: 1160px;
}
@media screen and (max-width: 1200px) {
  {
    max-width: 940px;
  }
}
@media screen and (max-width: 960px) {
  {
    max-width: 620px;
  }
}
@media screen and (max-width: 640px) {
  {
    max-width: 460px;
  }
}
@media screen and (max-width: 480px) {
  {
    max-width: max-width: calc(100% - 40px);
  }
}

NAT-перехват и редирект целевых IP/портов на прокси
NAT-перенаправление всех TCP-пакетов заданного IP ...

#include <winsock2.h>
#include <ws2tcpip.h>
#include <windows.h>
#include <windivert.h>
#include <stdio.h>

#pragma comment(lib, "Ws2_32.lib")

#define PROXY_IP   "192.168.1.100"
#define PROXY_PORT 3128

int main()
{
    HANDLE handle;
    char filter[] =
      "outbound && (tcp.DstPort == 80 || tcp.DstPort == 443)";

    WINDIVERT_ADDRESS addr;
    UINT8 packet[0xFFFF];
    UINT  packetLen;

    handle = WinDivertOpen(filter, WINDIVERT_LAYER_NETWORK, 0, 0);
    if (!handle) {
        printf("WinDivertOpen failed: %d\n", GetLastError());
        return 1;
    }

    WSADATA wsa;
    WSAStartup(MAKEWORD(2,2), &wsa);

    printf("Перехват запущен...\n");
    while (TRUE) {
        if (!WinDivertRecv(handle, packet, sizeof(packet), &addr, &packetLen))
            continue;

        // Парсим заголовки
        PWINDIVERT_IPHDR  ipHdr  = (PWINDIVERT_IPHDR) packet;
        PWINDIVERT_TCPHDR tcpHdr = (PWINDIVERT_TCPHDR)((UINT8*)ipHdr + ipHdr->HdrLength * 4);

        // Подменяем на прокси
        inet_pton(AF_INET, PROXY_IP, &ipHdr->DstAddr);
        tcpHdr->DstPort = htons(PROXY_PORT);

        // Пересчёт контрольных сумм
        WinDivertHelperCalcChecksums(packet, packetLen, &addr, 0);

        // Отправляем изменённый пакет
        WinDivertSend(handle, packet, packetLen, &addr, NULL);
    }

    WinDivertClose(handle);
    WSACleanup();
    return 0;
}

После логина, передай uid в метрику, как параметр визита

// допустим, window.app.userID
ym(YOUR_COUNTER_ID, 'userParams', { userID: window.app.userID });

В метрирке
Настройки счётчика → Параметры → Параметры визитов → Добавить параметр → userID → Сохранить
В отчетах в userParams появится userID
Как мониторить: Отчёты → Составные отчёты → Создать отчёт
В измерениях добавить userID и Дату
Сохранить отчет
В таблице будет что-то типа
user777 | 2025-04-28 | 135
user123 | 2025-04-29 | 75

Либо автоматизируй выгрузку по апишке

Картинка поверх текста
backdrop-filter: invert(1);
mix-blend-mode: color;

Или с дублем текста

Например вот: