- Языки
- Русский
- Платформа сайта
- GameStores
Перед тем как устанавливать, что-либо советую ознакомится с данным текстом.
Данный виджет написан на трёх языках:
Если у вас есть в коде прописанные цвета под такими же "root", советую поменять, чтобы не было кофликтов.
Примеры:
Данный виджет написан на трёх языках:
JS - Функция копирования текста в буффер обмена.
HTML - Сам виджет и его содержание.
CSS - Дизайн.
HTML - Сам виджет и его содержание.
CSS - Дизайн.
Если у вас есть в коде прописанные цвета под такими же "root", советую поменять, чтобы не было кофликтов.
CSS:
:root {
--primary-color: #c8443a;
--background-color: #1b1b1b;
--background-secondary: #121212;
--background-shadow: #111111;
--text-color: #ffffff;
--text-muted: #8a8a8a;
--border-color: #2a2a2a;
}Импорт шрифта Montserrat.
В :root заданы переменные с цветами — для удобства и поддержки темы.
.promocode-widget — контейнер с тёмным фоном, центрированный, с отступами.
Внутри виджета:
.promocode-widget h3 — белый, жирный заголовок среднего размера.
.promocode-widget p — серый, обычный текст поменьше.
.copy-button — красная кнопка с белым текстом, скруглениями, тенью и плавными эффектами при наведении:
При наведении кнопка чуть поднимается и тень становится ярче.
В отключённом состоянии — полупрозрачная и без реакции.
.notification — фиксированное всплывающее сообщение в правом верхнем углу, изначально скрытое.
В :root заданы переменные с цветами — для удобства и поддержки темы.
.promocode-widget — контейнер с тёмным фоном, центрированный, с отступами.
Внутри виджета:
.promocode-widget h3 — белый, жирный заголовок среднего размера.
.promocode-widget p — серый, обычный текст поменьше.
.copy-button — красная кнопка с белым текстом, скруглениями, тенью и плавными эффектами при наведении:
При наведении кнопка чуть поднимается и тень становится ярче.
В отключённом состоянии — полупрозрачная и без реакции.
.notification — фиксированное всплывающее сообщение в правом верхнем углу, изначально скрытое.
<div class="promocode-widget"> — главный контейнер для виджета, содержит заголовок, описание и кнопку.
<h3> — заголовок виджета с призывом активировать промокод.
<p> — дополнительный текст с мотивацией — получить бонус.
<button> — кнопка с классом copy-button. При клике запускает функцию copyPromocode().
<div class="notification"> — блок для отображения сообщения об успешном копировании.
<div class="notification error" id="error-notification" style="display: none;"> — блок для отображения ошибки, скрыт по умолчанию.
<h3> — заголовок виджета с призывом активировать промокод.
<p> — дополнительный текст с мотивацией — получить бонус.
<button> — кнопка с классом copy-button. При клике запускает функцию copyPromocode().
<div class="notification"> — блок для отображения сообщения об успешном копировании.
<div class="notification error" id="error-notification" style="display: none;"> — блок для отображения ошибки, скрыт по умолчанию.
promocode = "RUST2025" — это текст, который будем копировать.
Получаем с помощью JS нужные элементы страницы:
Кнопку копирования .copy-button,
блок для сообщения об успехе #notification,
блок для сообщения об ошибке #error-notification.
Если хотя бы один элемент не найден — функция останавливается и пишет ошибку в консоль.
Когда копирование началось, кнопка блокируется (disabled = true), чтобы пользователь не мог нажать её несколько раз подряд.
Есть внутренняя функция showNotification(element):
Она добавляет классу элемента show, чтобы показать уведомление.
Через 2 секунды класс убирается, и кнопка снова становится активной.
Это чтобы сообщение появлялось на 2 секунды и потом пропадало.
Проверяем, что браузер поддерживает navigator.clipboard и сайт работает по HTTPS.
Если да, то вызываем navigator.clipboard.writeText(promocode).
Если копирование успешно — показываем уведомление об успехе.
Если ошибка — показываем уведомление об ошибке и пишем ошибку в консоль.
Если современный способ недоступен, создаём невидимое поле (textarea).
Вставляем туда промокод, выделяем его и копируем командой document.execCommand('copy').
Если получилось — показываем успех.
Если нет — показываем ошибку и выводим сообщение об ошибке в консоль.
Удаляем временное поле с промокодом.
Получаем с помощью JS нужные элементы страницы:
Кнопку копирования .copy-button,
блок для сообщения об успехе #notification,
блок для сообщения об ошибке #error-notification.
Если хотя бы один элемент не найден — функция останавливается и пишет ошибку в консоль.
Когда копирование началось, кнопка блокируется (disabled = true), чтобы пользователь не мог нажать её несколько раз подряд.
Есть внутренняя функция showNotification(element):
Она добавляет классу элемента show, чтобы показать уведомление.
Через 2 секунды класс убирается, и кнопка снова становится активной.
Это чтобы сообщение появлялось на 2 секунды и потом пропадало.
Проверяем, что браузер поддерживает navigator.clipboard и сайт работает по HTTPS.
Если да, то вызываем navigator.clipboard.writeText(promocode).
Если копирование успешно — показываем уведомление об успехе.
Если ошибка — показываем уведомление об ошибке и пишем ошибку в консоль.
Если современный способ недоступен, создаём невидимое поле (textarea).
Вставляем туда промокод, выделяем его и копируем командой document.execCommand('copy').
Если получилось — показываем успех.
Если нет — показываем ошибку и выводим сообщение об ошибке в консоль.
Удаляем временное поле с промокодом.
Примеры:
