Skills

Skill - Вставить всплывающий виджет GetCourse на лендинг
---
description: Вставить всплывающий виджет GetCourse на лендинг. Передай скрипт(ы) виджета и укажи, какая кнопка должна его открывать.
---

## Что такое виджет GetCourse

Виджет GetCourse — это тег `<script>` с двумя ключевыми атрибутами:
- `id` — уникальный хеш, по которому платформа идентифицирует точку вставки
- `src` — URL вида `https://fitnessmama.school/pl/lite/widget/script?id=XXXXXXX`

Скрипт рендерит форму регистрации/оплаты прямо рядом с собой в DOM.

## Твоя задача

Пользователь предоставил один или несколько скриптов виджетов GetCourse и указал, какие кнопки должны их открывать.

Выполни следующие шаги:

### 1. Прочитай файл лендинга

Прочитай целевой HTML-файл, чтобы понять:
- Где находится закрывающий тег `</style>`
- Какие кнопки нужно связать с виджетами (их текст, классы, текущий `href`)
- Есть ли уже существующие модальные окна или скрипты виджетов

### 2. Добавь CSS модальных окон

Вставь перед `</style>` следующие стили (адаптируй border-radius и цвета под дизайн страницы):

```css
/* ===== GETCOURSE WIDGET MODALS ===== */
.gc-modal-overlay {
 display: none;
 position: fixed;
 inset: 0;
 background: rgba(0,0,0,0.6);
 backdrop-filter: blur(4px);
 z-index: 9999;
 align-items: center;
 justify-content: center;
}
.gc-modal-overlay.active {
 display: flex;
}
.gc-modal {
 background: #fff;
 border-radius: 16px;
 width: 100%;
 max-width: 500px;
 margin: 16px;
 overflow: hidden;
 position: relative;
}
.gc-modal-close {
 position: absolute;
 top: 12px;
 right: 16px;
 font-size: 28px;
 cursor: pointer;
 color: #666;
 background: none;
 border: none;
 line-height: 1;
 z-index: 1;
}
.gc-modal-close:hover {
 color: #222;
}
.gc-modal-body {
 padding: 8px;
}
```

### 3. Добавь HTML модальных окон и JavaScript

Вставь перед `</body>`. Для каждого виджета создай отдельный оверлей.
Именуй id как `gc-modal-[тип]`, например `gc-modal-free`, `gc-modal-vip`.
Скрипт виджета помести внутрь `.gc-modal-body`.

Шаблон для одного виджета:

```html
<!-- Modal [тип] -->
<div class="gc-modal-overlay" id="gc-modal-[тип]">
 <div class="gc-modal">
 <button class="gc-modal-close" onclick="gcCloseModal('[тип]')">&times;</button>
 <div class="gc-modal-body">
 <script id="[ID_ВИДЖЕТА]" src="[SRC_ВИДЖЕТА]"></script>
 </div>
 </div>
</div>
```

После всех модалок добавь единый блок JavaScript:

```html
<script>
 function gcOpenModal(type) {
 document.getElementById('gc-modal-' + type).classList.add('active');
 document.body.style.overflow = 'hidden';
 }
 function gcCloseModal(type) {
 document.getElementById('gc-modal-' + type).classList.remove('active');
 document.body.style.overflow = '';
 }
 // Закрытие по клику на фон оверлея
 document.querySelectorAll('.gc-modal-overlay').forEach(function(overlay) {
 overlay.addEventListener('click', function(e) {
 if (e.target === overlay) {
 overlay.classList.remove('active');
 document.body.style.overflow = '';
 }
 });
 });
 // Закрытие по клавише Escape
 document.addEventListener('keydown', function(e) {
 if (e.key === 'Escape') {
 document.querySelectorAll('.gc-modal-overlay.active').forEach(function(m) {
 m.classList.remove('active');
 });
 document.body.style.overflow = '';
 }
 });
</script>
```

### 4. Измени кнопки

Для каждой кнопки, которую нужно связать с виджетом:
- Замени `href="#"` на `href="javascript:void(0)"`
- Добавь `onclick="gcOpenModal('[тип]')"`

Пример:
```html
<!-- До -->
<a href="#" class="btn-primary">Купить</a>

<!-- После -->
<a href="javascript:void(0)" class="btn-primary" onclick="gcOpenModal('vip')">Купить</a>
```

### 5. Проверь результат

Сообщи пользователю:
- Какие кнопки были изменены
- Какие модальные окна созданы (id каждого)
- Как протестировать: открыть файл в браузере, нажать кнопки, проверить закрытие через ×, клик на фон, Escape

## Важные правила

- **Не дублируй** скрипты виджетов — каждый `id` виджета должен встречаться в DOM только один раз
- Если на странице уже есть своя модальная система, **используй её стили** вместо gc-modal-*
- Если пользователь указал несколько виджетов (Free, VIP и т.д.) — создай отдельный оверлей для каждого
- Если кнопка уже ссылается на `#tariffs` или другой якорь (прокрутка к секции) — **не трогай её**, только кнопки самой оплаты/регистрации