Сверстать страницу и добавить логику на JS

• Platform: internet browser
• Style: one dynamic page, responsive, mobile friendly, changing content on the fly, Apple-like style (simplistic, mostly white color palette).
• Language(s): HTML5, CSS, JavaScript, jQuery (нельзя добавлять другие JS или HTML/CSS фреймворки, нельзя использовать серверные языки вроде PHP и т.п.)
• Browser support: IE10+, Edge, Firefox 56/57+, Chrome latest, Safari 6+ Mac, iOS, Android
• В аттаче есть архив с версткой, оттуда можно взять часть логики, но все надо переверстать заново респонсивно и по стандартам, убрать кашу из JS-а внутри

1A - displays ads + progress bar. To be shown for 15 seconds.

Показывается реклама и прогресс-бар в течении 15 секунд

1B - replaces progress bar with "color selection" box. User must select one of the colors to continue. Slide 1C (warning box) is to be shown if user clicks "Continue" without selecting a color. User choice (ex. blue) must be memorized for the duration of the browser session.

Прогресс-бар заменяется на блок выбора цветов. Пользователь должен выбрать один из цветов для продолжения. Слайд 1С (блок предупреждения) показывается если пользователь кликает "Continue" без выбора цвета. Выбранный пользователем цвет должен быть запомнен на продолжении всей браузерной сессии.

2A - displays different ads + progress bar. To be shown for 10 seconds.

Показываются рекламные блоки и прогресс-бар в течении 10 секунд.

2B - replaces progress bar with "animal selection" box. User must select one of the animals to continue. Slide 2C (warning box) is to be shown if user clicks "Continue" without selecting an animal. User choice (ex. cat) must be memorized for the duration of the browser session.

Прогресс-бар заменяется на блок выбора животных. Пользователь должен выбрать одно из животных для продолжения. Слайд 2С (блок предупреждения) должен быть показан если пользователь кликнет на "Continue" без выбора животного. Выбранное пользователем животное должно быть запомнено на продолжении всей браузерной сессии.

3A - displays different ads + progress bar. To be shown for 5 seconds.

Показываются рекламные блоки и прогресс-бар в течении 5 секунд

3B - Replaces progress bar with "animal image rendered in color" selected in slides 1B and 2B + terms & conditions of use (textbox in desktop version, pop-up link in mobile version). User must click / tap the checkbox to continue. Slide 3C (warning box) is to be shown if user clicks "Accept Terms & Connect" without ticking the box.

Прогресс-бар заменяется на экран с выбранным животным выбранного цвета и текстом “terms & conditions” (блок текста в десктопной версии и поп-ап в мобильной версии). Пользователь должен кликнуть/тапнуть на чекбоксе для продолжения. Слайд 3С (блок предупреждения) показывается если пользователь кликает на "Accept Terms & Connect" без выбора чекбокса.

Program flow

* Expect a GET parameter, encoded in base64 + JSON array. If parameters are not supplied, there is nothing to do, display a blank or generic welcome page.

Ожидается что страница будет запрошена с GET параметрами, в виде JSON массива закодированного в base64. Если параметры не переданы - показывается пустая страница или обычная приветственная страница

* If parameters are supplied and valid, display slide 1A, wait 15 seconds, show slide 1B content.

Если параметры переданы и они валидные - показывается слайд 1А в течении 15 секунд и потом слайд 1B

*  If user selects a color and clicks / taps [Continue], go to slide 2A. If they just click / tap on [Continue], display warning (slide 1C).

Если пользователь выбрал цвет и кликнул/тапнул на [Continue] - переходим к слайду 2А. Если цвет не был выбран - показываем предупреждение (слайд 1С)

*  Display slide 2A, wait 10 seconds, show slide 2B content.

Показываем слайд 2А в течении 10 секунд и потом слайд 2В

* If user selects an animal and clicks / taps [Continue], go to slide 3A. If they just click / tap on [Continue], display warning (slide 2C).

Если пользователь выбрал животное и кликнул/тапнул на [Continue] - переходим к слайду 3А. Если не выбрал - показываем предупреждение (слайд 2С)

* Display slide 3A, wait 5 seconds, show slide 3B content.

Показываем слайд 3А в течении 5 секунд и потом слайд 3В

* If user ticks the "accept" checkbox and clicks / taps [Accept Terms & Connect], redirect user to the page he/she came from (JSON array parameter). If they just click / tap on [Accept Terms & Connect], display warning (slide 3C).

Если пользователь выбрал чекбокс и клинул/тапнул [Accept Terms & Connect] - редиректим пользователя на страницу переданную в json-параметрах (в урле). Если чекбокс не был выбран - показываем предупреждение (слайд 3С)

* At any time, if user clicks on at the top right corner, display slide "Info Page".

В любой момент при клике/тапе на иконку вверху справа - показываем слайд "Info Page" (поверху текущего слайда)

* At any time, if user click on any ad with links, ping authorization URL (to be provided) and redirect user to ad. captive.apple.com does not support pop-ups, so it should not contain ads with links.

В любой момент если пользователь кликает на рекламу с ссылкой - дергаем авторизационный URL (будет предоставлен) и редиректим пользователя по рекламной ссылке. captive.apple.com не поддерживает попапы, поэтому он не должен содержать рекламу с ссылками

Features

* Must remember which slide (1x, 2x or 3x) it is on using hidden variables (sessionStoragе), not GET in the address bar). Already done in v1.

Важно запоминать в скрытых переменных в sessionStoragе (без использования параметров в адресной строке)

какой экран  (1x, 2x or 3x) в данный момент активен

* Page refresh on rotate, applies to phones / tablets, JS detects the orientaion change event and reloads the page (with different ads). Already done in v1.

Страница подстраивается под ширину экрана при смене ориентации мобильного устройства (вертикальная/горизонтальная). Для этого можно перегружать страницу, но можно и без перезагрузки

* Smooth scroll for any long texts like terms & conditions of use, via CSS. Already done in v1.

Должен быть плавный скролл с помощью CSS  любых длинных текстов, например  terms & conditions

* Must be aware of the resolution (width / height), and display the biggest / most ads that would fit. Partially done in v1.

В десктопной версии если позволяет разрешение экрана - боковые баннеры заменяются на другие - с шириной 300 пикселей

* Support various ad formats, including: local images / linked images, with & without URLS, ad network ads (JS based), video ads.

Должна быть поддержка разных рекламных форматов: локальные картинки или картинки по ссылке с/без внешних ссылок, рекламная сеть (на основе JS), видео-реклама

* Detect ad blockers and display local images / linked images instead of JS ads in the same space. Should support a "nag screen" if no ads are available. Nag screen is a message telling the user to disable his/her ad blocker. Example: https://cdn.pcmobitech.com/wp-content/uploads/2016/06/Disable-adblocker-to-view-content-on-this-site.png

Нужно проверять наличие у пользователя активного блокировщика рекламы (например AdBlock) и в случае наличия (если реклама порезана) - показывать экран с предупреждением (вид экрана в ссылке).

* Detect captive.apple.com portal and display local ads as JS ads don't open properly there. Partially done in v1 (via platform name). Captive Apple portal is a feature reduced browser window with no JS alert, no cookies, no new tab/window open, etc.

Пингать ссылку captive.apple.com и вслучае ее недоступности - показывать локальную рекламу (потому что JS-реклама не сможет получить свои данные).

* Warning popups (ex. sweetalert2.js with Promise polyfil for IE support)

Для варнинг-попапов используем скрипт sweetalert2.js с Promise polyfil для совместимости с IE

* Lightbox popups (ex. jQuery built-in or Fancybox)

Для лайтбокс-попапов используем встроенные возможности jQuery или Fancybox

* Progress bar (ex. https://loading.io/progress/)

Для прогресс-бара берем один из примеров по ссылке

* Google Analytics embedded (ID code to be provided)

В страницу должен быть встроен код Google Analytics (ID будет предоставлен позже)

* Sending statistics / metadata to server (link to be provided) - successful connection + ad clicks. Data such as: date/time, IP, host, browser name / agent, ad slot requested, etc.

На сервер (ссылка будет предоставлена позже) отправляется статистика (данные) при успешном коннекте и при клике на баннерах. Должны передаваться такие данные: дата/время, IP, host, browser name/agent, номер рекламного слота и т.п.

* Sending errors to server (link to be provided) - if any of the content failed to load (ex. if one of the ads failed to load with error 404). Data such as: date/time, IP, host, browser name / agent, content that triggered error, etc.

На сервер (ссылка будет предоставлена позже) отправляются сообщения об ошибках - если какой-то контент не загрузился (например если один из рекламных блоков не загрузился с ошибкой 404). Сообщение сопровождается сопутствующими данными: дата/время, IP, host, browser name/agent, идентификатор сбойного элемента контента и т.п.

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