ru24.pro
Работа
Сентябрь
2024

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

0

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" }, ...