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

Запрос к 1 API, немного JS на AngularJs и верстки с Bootstrap

Технологии
AngularJs (+ ngTouch), Bootstrap, CordovaJs.

Если требуется что-то дополнительное, упрощающее разработку, вроде драйверов для localstorage то тоже ставим. Чистый css / html / js без прекомпиляторов, бить на компоненты не нужно, сборщики тоже не нужны т.к кода мизер.

Желательно запустить на android 4 и выше под CordovaJs, но если не умеете, то ничего страшного, решим своими силами.

Требования к реализации
Вся логика должна быть описана в рамках одного Angular контроллера, обязательно использовать “Controller as vm” и хранить конфигурацию отдельных страничек (если это требуется) уже в vm.settings, vm.audit, vm.analytics и тд.

Прототипы интерфейса необходимо сверстать на бутстрап шаблонах, в рамках одного html документа. Для скрытия элементов интерфейса или страниц используется директива ng-if (т.к списки могут быть большие).

Все стили писать на основании классов. Id исключить и инлайн стили тоже постараться исключить.

Описание логики:
Вы загружаете JSON по API с определенным интервалом. Интервал и URL задаются в настройках и хранится в localstorage. Интервал, по умолчанию, 5 минут, ввод осуществляется в минутах.

Если полученный ответ не соответствует примеру то отправляем пользователя на страницу настроек для ввода URL. Если просто нет интернета то ничего не делаем.

Время последнего успешного запроса в формате ("" + new Date()) отображается на странице настроек под всеми полями для ввода.

При получении валидного ответа проверяем статусы на наличие критических ошибок, если такие есть, то показываем popup и бесконечно проигрываем сирену из приложенного mp3 файла. После нажатия на popup звук отключается, но его можно будет включить в настройках. Учтите, что данный параметр не нужно сохранять в localstorage, т.к по умолчанию звук включен.

Раздел аналитики отображает ряд ссылок на дополнительные странички (кнопками), которые будут открыты в iframe для просмотра. Кнопка Back возвращает на страницу аналитики.

В разделе аудита формируется список из статусов с цветовым обозначением.

Пример JSON ответа по GET запросу к API:
{
“statuses”: [
{“title”: "Database", “active”: 1, "label": "Works fine"}, //Success
{“title”: "Server", “active”: 2, "label": "Lost packages"}, //Warning
{“title”: "Other key", “active”: 0, "label": "Critical error"} //Error
...
],
“text”: "Some text",
“pages”: [
{“title”: "Other information", “url”: "http://example.com"}
...
]
}

//“...” - означает, что нет ограничений по элементам в массиве

Прототип интерфейса: