Ищу фронта сделать/переделать страницу

Цена договорная
10 сентября 2024, 15:16 • 17 откликов • 172 просмотра
Telegram Bot, WebApp. У меня есть html страница (чистый html+css) для запроса данных.
(накий аналог Google Forms, генерируемой динамически)
Как оно работает:

Я передаю на страницу JSON с компонентами, которые там нужны (пример - внизу этого ТЗ). И страничка динамически формирует эти элементы (textarea, checkbox, radio, select...) и запрашивает у юзера данные.
Соотв, при нажатии кнопки - кидает мне POST запрос со всеми данными.

Что нужно сделать-переделать
1. Цветовую схему. WebApp в телеге при старте получают цветовые настройки юзера. И моя страница сейчас их использует (там всего 8 цветов). Вместо этого я хочу выбор (передавать в json)
theme: 'light', 'dark', 'auto', 'custom'

2. Мне нужен новый компонент мультиселект (в аттаче пример)
3. Нужен компонент селект с зависимостью (например, выбор страны и города - чтобы второй селект с городами показывал только города по нужной стране из выбранного первого селекта)
4. Пофиксить скролл (сейчас там где-то есть горизонтальный скролл, форма заходит за ширину вебаппа)
5. Удалить из CSS файла неиспользуемые стили

- Для легкости страница не использует bootstrap, jquery или подобное. Но если для мультиселекта нужно будет подключить тот же бутстрап - окай.
- Для теста вам потребуется https где-то у вас, можно через ngrok. Ибо телеграмные webapp работают только с https. А тестировать надо будет именно в телеге конечную версию.

Указывайте, плз, сразу свой usernamе в телеге

Пример JSON сейчас:
{
"header": "Новый запрос",
"desc": "Укажите короткое название (тему) запроса, полный текст и дедлайн. Также – если поставите галочку ''анонимно'', то эксперт не увидит название СМИ.",
"button": "Отправить",
"frames": [
{
"header": "Тема запроса",
"type": "textarea",
"rows": 2,
"placeholder": "Ценность диплома при устройстве на работу",
"name": "title",
"regex": ".{1,100}"
},
{
"header": "Дедлайн: дата",
"type": "datepicker",
"name": "date",
"altInput": true,
"altFormat": "d.m.Y",
"dateFormat": "Y-m-d"
},
{
"header": "Дедлайн: время по Мск",
"type": "timepicker",
"name": "time",
"value": "12:00"
}, ...
Файлы