Нужно создать лёгкий адаптивный popup для страницы сайта: посетитель открывает его кнопкой Share, а затем делится текущей страницей в соцсетях или копирует ссылку. Компонент должен использовать существующие Open Graph-данные страницы и не добавлять внешние зависимости, кроме адресов сервисов для публикации.

Что предстоит делать

• Подготовить переиспользуемый компонент на HTML, JavaScript и CSS либо небольшой компонент на React.
• Добавить кнопки для Facebook, X, LinkedIn, WhatsApp, Telegram и электронной почты, а также действие Copy Link.
• Настроить копирование канонического URL в буфер обмена и визуальное подтверждение, например сообщение «Ссылка скопирована».
• Сформировать ссылки для публикации с заголовком, описанием и изображением из Open Graph текущей страницы.
• Стилизовать popup под цветовую палитру сайта и учитывать системную тёмную тему.
• Подготовить краткие инструкции по добавлению компонента на страницы блога, товара или лендинга без нарушения разметки.
• Составить чек-лист тестирования ссылок, копирования и адаптивности в основных браузерах, а также на iOS и Android.

Что потребуется

• Навыки веб-разработки и уверенная работа с JavaScript, HTML и CSS.
• Понимание адаптивной верстки и особенностей мобильных браузеров.
• Знакомство с Open Graph и механизмом формирования ссылок для публикации в социальных сетях.
• Умение подготовить понятную техническую документацию и проверить работу компонента в браузерах и на мобильных устройствах.
• PHP и React указаны как дополнительные релевантные навыки; в описании допускается vanilla JavaScript без сторонних библиотек.

Что важно знать

Результат включает готовый к повторному использованию компонент, инструкции по установке и короткий план проверки. В задании отдельно обозначены мобильная адаптивность, тёмная тема и отсутствие лишних зависимостей; конкретные сроки и техническая платформа сайта не указаны.