Срочно: Фронтенд сервиса проката повербанков на React/Vue.js с RESTapi

Необходимо сделать функциональный лендинг для сервиса проката повербанков.

Должно быть две версии, которые автоматически будут определяться и использоваться на одном адресе - мобильная и для ПК/Ноутбука

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

Реализовать несколько страниц: Главная, О нас, Станции, FAQ, Контакты.

Стартовая страница - Главная.

В шапке - Главная, Карта. В подвале - всё остальное.

В куках хранить вечный сгенерированный на стороне сайта uuid, который должен быть присвоен при отсутствии.

Элементы страницы "Главная":

- Поле ввода номера станции (всегда цифра в пределах 1 и 999)

- Числовой url-параметр ?sn=число.

-- Записывается в поле ввода при перезагрузке сайта как будто это вписал пользователь в плане модификации других форм. У нас же его ввод номера станции в поле что-то там добавляет. Если параметр некорректный, то действуем как будто пользователь сам вводил некорректно.

- Выезжающий лейбл рядом с полем ввода с подсказками (Должен выезжать сразу при модификации поля ввода или при наличии информации о корректном номере станции из url-параметра):

- -"Введите номер от 1 до 999" - При некорректном вводе

или

-- значение из поля "address", если оно не пустое

- Динамически обновляющаяся кнопка "Получить"

-- Информация из GET /station (внизу описан REST api)

-- При нажатии выводить текст в всплывающем окне из GET /try-give, если все проверки корректны

- Лейбл с текущим статусом повербанка.

-- Информация из GET /user/active-powerbank

-- Скрыт, если нет информации (т.е пусто, "")

Элементы страницы "Станции":

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

-- К каждому блоку мы привязываем информацию о станции

-- Загружаются разом все

-- В каждом элементе должна быть информация:

 --- Адрес

 --- Активность станции. Включена/Выключена

 --- Заполненность станции X/Y (Например будет 2/6)

Элементы страницы "FAQ":

- Информация должна браться из файла faq.txt

- Лейбл с текстом "Ответы на вопросы"

- Повторяющаяся группа элементов

-- Вопрос

-- Ответ, который выползает/уползает при нажатии

Элементы страницы "О нас":

- Лейбл, в который записывается информация из файла about-us.txt

Элементы страницы "Контакты":

- Лейбл, в который записывается информация из файла contacts.txt

Готовое REST API:

- Начало адреса в файле rest.txt

- Ответ везде в json

GET {тут_начало_адреса_из_файла. у всех остальных также}/user/active-powerbank?user={uuid}

Вернёт: {

"info": "тут_строка_с_информацией"

}

GET /try-give?user={uuid}&sn={station_number}

Вернёт: {

"result": "тут_строка_с_информацией"

}

GET /stations?user={uuid}

Вернёт: {

"size": количество_элементов

"content": [

{как_будто_из_GET_/station},

{как_будто_из_GET_/station}

]

}

GET /station?user={uuid}&sn={station_number}

Вернёт: {

"address": "тут_строка_с_адресом",

"network": "online" or "offile",

"powerbanks": "x/y" например "1/6"

}