Для отображения окна вызовите функцию window.showWheel(config, timeout, callback)

const config = [
  ...
  {
    value: 2, // значение которое будет передано в callback если выпадет этот сектор
    text: '15%', // текст для отображения на секторе
    allow: true, // может ли этот сектор выпасть
  }
  ...
]

• В config необходимо задать строго 12 секторов
• Для секторов со скидкой (параметр text вида /^\d\%$/) размер шрифта будет увеличен
• Для секторов с текcтом максимальная длина слова 10 символов и максимум 3 строки

timeout задает через сколько ms окно закроется

callback будет вызван с одним параметром result при нажатии пользователем на кнопку 'Получить промокод', после чего через 3 секунды окно закроется

  const result = {
    value: 2, // значение указанное в config для выпавшего сектора
    name: 'Вася', // введенное пользователем значение в поле 'Имя'
    phone: '79999999', // введенное пользователем значение в поле 'Телефон'
  };

Вызов window.showWheel вернет функцию hide которую можно использовать для преждевременного закрытия окна

HTML код окна необходимо добавить на страницу самостоятельно

Верстка выполнена в методологии BEM с использование блоков wheel, reel, wheel-timer и вспомогательно класса visually-hidden

Для масштабирования текста вместе с графикой все размеры блоков wheel и reel промножены на css перемнную --scale корневого элемента .wheel, которая меняется в зависимости от размеров окна браузера

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

Для отображения таймера вызовите функцию window.showTimer(timeout)

timeout задает время таймера в ms

Вызов window.showTimer вернет функцию hide которую можно использовать для преждевременного закрытия попапа с таймером

HTML код попапа необходимо добавить на страницу самостоятельно