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` или другой якорь (прокрутка к секции) — **не трогай её**, только кнопки самой оплаты/регистрации