вашеимя
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur sit amet diam eu pharetra. Aliquam sit amet odio at urna tempus vehicula in sed quam. Cras ultricies dolor sit amet ex aliquam mollis. Donec iaculis est eget vestibulum aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur sit amet diam eu pharetra. Aliquam sit amet odio at urna tempus vehicula in sed quam. Cras ultricies dolor sit amet ex aliquam mollis. Donec iaculis est eget vestibulum aliquet.
love
улица бесконечное лето долгая бесконечная жизнь какие-то еще слова
flood
вася иванов 2 3
write
1 2 3

yanichegoneznayu

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » yanichegoneznayu » готовые штуки » лс


лс

Сообщений 1 страница 2 из 2

1

[hideprofile][html]
<style>
/* =============================================================
   ON:AIR — ЛИЧНАЯ СТРАНИЦА / музыкальная редакция
   01. ОСНОВНЫЕ ЦВЕТА — меняйте значения ниже
   ============================================================= */
.onair-profile {
  --profile-bg: #10162c;        /* внешний тёмный корпус */
  --profile-bg2: #1e2b55;       /* второй оттенок корпуса */
  --card-bg: #f8f9ff;           /* карточка с аватаром */
  --shelf-bg: #eff2fa;          /* фон коллекций и кредитов */
  --text: #202941;              /* основной текст */
  --muted: #7787a6;             /* мелкие надписи */
  --accent: #466abb;            /* синий акцент */
  --light-accent: #9beaf4;      /* голубой неон */
  --lilac-accent: #b7a6e8;      /* сиреневый оттенок */
  --cover-left: #233e79;       /* начало обложки */
  --cover-mid: #466eb7;        /* середина обложки */
  --cover-right: #1d2b57;      /* конец обложки */
  --scroll-thumb: #9caed2;     /* скроллбар */

  position: relative;
  box-sizing: border-box;
  width: 100%; max-width: 790px;
  margin: 12px auto; padding: 15px;
  border: 1px solid rgba(155,203,250,.25);
  border-radius: 23px;
  color: #fff;
  background: radial-gradient(ellipse at 10% 5%, rgba(83,115,198,.23), transparent 40%),
              linear-gradient(140deg, var(--profile-bg), var(--profile-bg2) 95%);
  font: 12px/1.4 'Trebuchet MS', Arial, sans-serif;
  box-shadow: 0 15px 38px rgba(12,23,54,.2);
  overflow: hidden;
}
.onair-profile *, .onair-profile *::before, .onair-profile *::after { box-sizing: border-box; }
.onair-profile h2, .onair-profile h3, .onair-profile p { margin: 0; }
/* Тонкие дуги на тёмной подложке — только декоративный CSS */
.onair-profile::before {
  content: ''; pointer-events: none; position: absolute; z-index: 0;
  width: 310px; height: 450px; right: -165px; top: -160px;
  border: 1px solid rgba(163,195,244,.17);
  border-radius: 48% 52% 60% 40%; transform: rotate(-23deg);
  box-shadow: 0 0 0 37px rgba(163,195,244,.025), 0 0 0 88px rgba(163,195,244,.018);
}

/* 02. ЛОГОТИП И ОБЛОЖКА */
.onair-profile .onair-top {
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin: 0 3px 10px; font-size: 9px; color: #d9e7ff;
  letter-spacing: 1.35px; text-transform: uppercase;
}
.onair-profile .onair-logo { font-weight: 900; font-size: 20px; color: #fff; letter-spacing: -1px; line-height: 1; }
.onair-profile .onair-logo b { color: var(--light-accent); }
.onair-profile .onair-logo small { margin-left: 8px; font-size: 8px; letter-spacing: 1.5px; font-weight: normal; vertical-align: middle; color: #a9bfe6; }
.onair-profile .onair-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid rgba(148,224,246,.28);
  border-radius: 30px; background: rgba(16,34,79,.4);
  white-space: nowrap;
}
.onair-profile .onair-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--light-accent); box-shadow: 0 0 8px rgba(137,228,247,.9); }
.onair-profile .onair-cover {
  position: relative; z-index: 1; height: 98px; padding: 15px; overflow: hidden;
  border-radius: 16px; border: 1px solid rgba(255,255,255,.1);
  /* СВОЯ ОБЛОЖКА: строку background замените на url('ССЫЛКА') center / cover */
  background: radial-gradient(ellipse at 70% 0%, rgba(159,218,255,.32),transparent 43%),
              linear-gradient(117deg, var(--cover-left),var(--cover-mid) 53%,var(--cover-right));
}
/* Две мягкие произвольные формы — отсылка к первоначальному дизайну */
.onair-profile .onair-cover::before {
  content: ''; position: absolute; left: 30%; top: -65px;
  width: 360px; height: 175px;
  border-radius: 35% 65% 60% 40% / 45% 40% 60% 55%;
  background: rgba(112,145,221,.37); transform: rotate(-12deg);
  box-shadow: 0 15px 65px rgba(13,21,69,.14);
}
.onair-profile .onair-cover::after {
  content: 'ON AIR'; position: absolute; right: 20px; bottom: -37px;
  font-size: 96px; font-weight: 900; letter-spacing: -8px;
  white-space: nowrap; line-height: 1; color: rgba(255,255,255,.13);
}
.onair-profile .onair-coverline {
  position: relative; z-index: 2; width: fit-content; max-width: 100%;
  padding: 5px 10px; border: 1px solid rgba(235,246,255,.31);
  border-radius: 20px; background: rgba(16,39,93,.22);
  color: #eaf7ff; font-size: 9px; letter-spacing: 1.35px;
  text-transform: uppercase;
}
.onair-profile .onair-cover-deco {
  position: absolute; z-index: 1; right: 82px; top: -27px;
  color: rgba(224,241,255,.55); font-size: 107px; line-height: 1;
  transform: rotate(14deg); pointer-events: none;
}
.onair-profile .onair-cover-frequency {
  position: absolute; z-index: 2; top: 18px; right: 18px;
  font-size: 9px; color: rgba(255,255,255,.84); letter-spacing: 1px;
}

/* 03. ВЕРХНЯЯ КАРТОЧКА: АВАТАР + ИМЯ + МУЗЫКА */
.onair-profile .onair-main {
  position: relative; z-index: 2; display: grid;
  grid-template-columns: 88px minmax(0,1fr) 147px;
  align-items: center; gap: 14px;
  margin: -36px 11px 11px; padding: 12px 14px;
  color: var(--text); background: linear-gradient(120deg,#fff,var(--card-bg));
  border: 1px solid rgba(255,255,255,.96); border-radius: 18px;
  box-shadow: 0 8px 23px rgba(5,14,48,.24);
}
.onair-profile .onair-avatar {
  width: 88px; height: 88px; overflow: hidden;
  border: 3px solid #fff; border-radius: 13px;
  background: var(--accent); box-shadow: 0 0 0 1px #b7c8e7, 0 5px 12px rgba(42,69,126,.18);
}
.onair-profile .onair-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.onair-profile .onair-info { min-width: 0; }
.onair-profile .onair-eyebrow {
  width: fit-content; padding: 2px 8px; margin-bottom: 4px;
  background: #e4edfc; border-radius: 20px; color: var(--accent);
  font-size: 8px; letter-spacing: 1.25px; font-weight: bold;
}
.onair-profile .onair-name {
  color: #202a47; font-size: 27px; font-weight: 900; line-height: 1.05;
  letter-spacing: -1.1px; text-transform: uppercase; overflow-wrap: anywhere;
}
.onair-profile .onair-subtitle { color: var(--muted); margin: 4px 0 5px; font-size: 10px; }
.onair-profile .onair-meta { display: flex; flex-wrap: wrap; gap: 7px; font-size: 9px; color: #7d8aaa; }
.onair-profile .onair-meta strong { color: #37589f; }
.onair-profile .onair-track {
  display: flex; gap: 8px; align-items: center; min-width: 0;
  padding: 8px; border: 1px solid #dce5f5; border-radius: 12px;
  background: linear-gradient(135deg,#eef5fd,#e8eafd);
}
.onair-profile .onair-track-symbol {
  display: grid; place-items: center; flex: 0 0 27px;
  width: 27px; height: 27px; border-radius: 50%;
  color: var(--light-accent); background: #2f4d8e; font-size: 14px;
}
.onair-profile .onair-track-info { min-width: 0; }
.onair-profile .onair-track-label { font-size: 8px; color: #697ea4; text-transform: uppercase; letter-spacing: .4px; }
.onair-profile .onair-track-title { color: #223254; font-weight: bold; font-size: 11px; overflow-wrap: anywhere; }
.onair-profile .onair-track-artist { font-size: 9px; color: #7183a8; }

/* 04. КОЛЛЕКЦИИ: 2 БЛОКА; В КАЖДОМ 2 КОЛОНКИ И ВЕРТИКАЛЬНЫЙ СКРОЛЛ */
.onair-profile .onair-library { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin: 0 11px; }
.onair-profile .onair-box {
  min-width: 0; padding: 11px 13px; border-radius: 15px;
  color: var(--text); background: var(--shelf-bg);
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 3px 10px rgba(8,22,58,.1);
}
.onair-profile .onair-box-head { display: flex; justify-content: space-between; gap: 6px; align-items: center; margin-bottom: 8px; }
.onair-profile .onair-box h3 {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 900; letter-spacing: .4px; text-transform: uppercase;
}
.onair-profile .onair-box h3::before {
  content: '✳'; color: #5e84c7; font-size: 15px; font-weight: normal; line-height: 1;
}
.onair-profile .onair-count {
  color: #6884b2; padding: 3px 7px; border-radius: 30px;
  background: #fff; font-size: 8px; letter-spacing: .35px; white-space: nowrap;
}
.onair-profile .onair-item-scroll {
  height: 100px; overflow-y: scroll; overflow-x: hidden;
  scrollbar-color: var(--scroll-thumb) #d6deef; scrollbar-width: thin;
}
.onair-profile .onair-item-scroll::-webkit-scrollbar { width: 7px; }
.onair-profile .onair-item-scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; }
.onair-profile .onair-item-scroll::-webkit-scrollbar-track { background: #d6deef; border-radius: 8px; }
.onair-profile .onair-items {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 7px; align-content: start; justify-items: center;
  padding: 0 5px 2px 0;
}
.onair-profile .onair-item {
  display: block; width: 100%; max-width: 210px; aspect-ratio: 5 / 1;
  padding: 0; border: 0; border-radius: 6px;
  background: transparent; overflow: hidden;
  cursor: copy; appearance: none; font: inherit;
  box-shadow: 0 2px 5px rgba(15,34,84,.11);
  transition: transform .15s ease, box-shadow .15s ease;
}
.onair-profile .onair-item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.onair-profile .onair-item:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(35,65,124,.25); }
.onair-profile .onair-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 05. КРЕДИТЫ — УЗКАЯ ПО ВЫСОТЕ ПОЛКА С ГОРИЗОНТАЛЬНЫМ СКРОЛЛОМ */
.onair-profile .onair-credits { position: relative; z-index: 1; margin: 11px 11px 0; padding: 8px 13px; }
.onair-profile .onair-credits .onair-box-head { margin-bottom: 5px; }
.onair-profile .onair-ticket-scroll {
  width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 5px;
  scrollbar-color: var(--scroll-thumb) #d6deef; scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.onair-profile .onair-ticket-scroll::-webkit-scrollbar { height: 7px; }
.onair-profile .onair-ticket-scroll::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 8px; }
.onair-profile .onair-ticket-scroll::-webkit-scrollbar-track { background: #d6deef; border-radius: 8px; }
.onair-profile .onair-credit-list { display: flex; flex-wrap: nowrap; gap: 8px; }
.onair-profile .onair-credit-ticket {
  display: flex; align-items: center; gap: 7px; flex: 0 0 165px;
  min-height: 35px; padding: 5px 7px;
  border: 1px dashed #9fb7dd; border-radius: 9px;
  background: #fff; color: var(--text);
}
.onair-profile .onair-credit-ticket:nth-child(2) { background: #e4edff; }
.onair-profile .onair-credit-ticket:nth-child(3) { background: #dcf1f7; }
.onair-profile .onair-credit-icon {
  flex: 0 0 23px; display: grid; place-items: center;
  width: 23px; height: 23px; border-radius: 7px;
  background: #304e91; color: #daefff; font-size: 14px;
}
.onair-profile .onair-credit-name { flex: 1; min-width: 0; font-size: 10px; font-weight: bold; line-height: 1.2; }
.onair-profile .onair-credit-name small { display: block; margin-top: 2px; color: var(--muted); font-size: 8px; font-weight: normal; }
.onair-profile .onair-credit-ticket strong { color: var(--accent); font-size: 11px; }

/* 06. СЛУЖЕБНОЕ СООБЩЕНИЕ И ПОДВАЛ */
.onair-profile .onair-copy-toast {
  position: fixed; z-index: 9999; bottom: 18px; left: 50%; transform: translateX(-50%);
  padding: 7px 13px; border-radius: 9px; color: #fff; background: #172444;
  font-size: 11px; opacity: 0; visibility: hidden; pointer-events: none;
  box-shadow: 0 5px 15px rgba(0,0,0,.25);
  transition: opacity .12s;
}
.onair-profile .onair-copy-toast.is-visible { opacity: 1; visibility: visible; }
.onair-profile .onair-foot {
  position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px;
  margin: 10px 12px 0; color: var(--light-accent);
  font-size: 8px; letter-spacing: 1.3px; opacity: .77; text-transform: uppercase;
}

/* 07. УЗКИЕ ЭКРАНЫ (две миниатюры в строке сохраняются) */
@media (max-width: 590px) {
  .onair-profile { padding: 11px; }
  .onair-profile .onair-cover { height: 85px; }
  .onair-profile .onair-main { grid-template-columns: 76px minmax(0,1fr); gap: 9px; margin: -28px 3px 10px; padding: 10px; }
  .onair-profile .onair-avatar { width: 76px; height: 76px; }
  .onair-profile .onair-name { font-size: 23px; }
  .onair-profile .onair-track { grid-column: 1 / -1; }
  .onair-profile .onair-library { grid-template-columns: 1fr; margin: 0 3px; gap: 9px; }
  .onair-profile .onair-credits { margin: 9px 3px 0; }
  .onair-profile .onair-cover-frequency { display: none; }
}
@media (max-width: 365px) {
  .onair-profile .onair-logo small { display: none; }
  .onair-profile .onair-name { font-size: 21px; }
  .onair-profile .onair-cover::after { font-size: 70px; bottom: -20px; }
}
</style>
<div class="onair-profile">
  <!-- ШАПКА / ЛОГОТИП -->
  <div class="onair-top">
    <div class="onair-logo">ON<b>:</b>AIR <small>ЛИЧНАЯ СТРАНИЦА</small></div>
    <div class="onair-live"><span class="onair-dot"></span> Игрок в эфире</div>
  </div>

  <!-- ОБЛОЖКА: заменить background в CSS класса .onair-cover -->
  <div class="onair-cover">
    <div class="onair-coverline">Твоя частота / Твоя история / Твой звук</div>
    <span class="onair-cover-deco" aria-hidden="true">✳</span>
    <span class="onair-cover-frequency">ON:AIR · 24/7</span>
  </div>

  <!-- ОСНОВНАЯ ИНФОРМАЦИЯ -->
  <div class="onair-main">
    <!-- АВАТАР: заменить src -->
    <div class="onair-avatar"><img src="https://i.pinimg.com/736x/1b/57/5e/1b575e9a8a845ae9bb43ab3312c5df1b.jpg" alt="Аватар игрока"></div>
    <!-- ИМЯ, ФРАЗА, ВОЗРАСТ И ГРУППА -->
    <div class="onair-info">
      <div class="onair-eyebrow">ИГРОК / 001</div>
      <h2 class="onair-name">Seo Changbin</h2>
      <p class="onair-subtitle">у каждого голоса своя частота.</p>
      <div class="onair-meta"><span><strong>27</strong> лет</span><span>/</span><span><strong>Stray Kids</strong> / группа</span></div>
    </div>
    <!-- МОЯ ПЕСНЯ -->
    <div class="onair-track">
      <span class="onair-track-symbol">♫</span>
      <div class="onair-track-info">
        <div class="onair-track-label">Моя песня</div>
        <div class="onair-track-title">VENOM</div>
        <div class="onair-track-artist">Stray Kids</div>
      </div>
    </div>
  </div>

  <!-- ФОНЫ И ПЛАШКИ: два равных блока; в каждом два столбца -->
  <div class="onair-library">
    <!-- КОЛЛЕКЦИЯ «ФОНЫ»: две адаптивные колонки -->
    <section class="onair-box">
      <div class="onair-box-head"><h3>Фоны</h3><span class="onair-count">В КОЛЛЕКЦИИ: 05</span></div>
      <div class="onair-item-scroll">
        <div class="onair-items">
        <!-- Предмет 01: замените src и title -->
        <button type="button" class="onair-item" title="за боевые заслуги"
                aria-label="Фон «Голубая волна» — за активность — скопировать ссылку">
          <img src="https://upforme.ru/uploads/001c/b5/80/2/t552013.png" width="210" height="42" alt="Голубая волна">
        </button>
        <!-- Предмет 02: замените src и title -->
        <button type="button" class="onair-item" title="Фон «Dream Haze» — лимитная награда · нажмите, чтобы скопировать ссылку"
                aria-label="Фон «Dream Haze» — лимитная награда — скопировать ссылку">
          <img src="ССЫЛКА_НА_ФОН_02" width="210" height="42" alt="Дымка">
        </button>
        <!-- Предмет 03: замените src и title -->
        <button type="button" class="onair-item" title="Фон «Sea Glass» — из магазина · нажмите, чтобы скопировать ссылку"
                aria-label="Фон «Sea Glass» — из магазина — скопировать ссылку">
          <img src="ССЫЛКА_НА_ФОН_03" width="210" height="42" alt="Морское стекло">
        </button>
        <!-- Предмет 04: замените src и title -->
        <button type="button" class="onair-item" title="Фон «Static Grey» — подарок · нажмите, чтобы скопировать ссылку"
                aria-label="Фон «Static Grey» — подарок — скопировать ссылку">
          <img src="ССЫЛКА_НА_ФОН_04" width="210" height="42" alt="Серый шум">
        </button>
        <!-- Предмет 05: замените src и title -->
        <button type="button" class="onair-item" title="Фон «After Hours» — награда за конкурс · нажмите, чтобы скопировать ссылку"
                aria-label="Фон «After Hours» — награда за конкурс — скопировать ссылку">
          <img src="ССЫЛКА_НА_ФОН_05" width="210" height="42" alt="После эфира">
        </button>
        </div>
      </div>
    </section>
    <!-- КОЛЛЕКЦИЯ «ПЛАШКИ»: две адаптивные колонки -->
    <section class="onair-box">
      <div class="onair-box-head"><h3>Плашки</h3><span class="onair-count">В КОЛЛЕКЦИИ: 05</span></div>
      <div class="onair-item-scroll">
        <div class="onair-items">
        <!-- Предмет 01: замените src и title -->
        <button type="button" class="onair-item" title="Плашка NIGHT SIGNAL — редкая · нажмите, чтобы скопировать ссылку"
                aria-label="Плашка NIGHT SIGNAL — редкая — скопировать ссылку">
          <img src="ССЫЛКА_НА_ПЛАШКА_01" width="210" height="42" alt="Ночной сигнал">
        </button>
        <!-- Предмет 02: замените src и title -->
        <button type="button" class="onair-item" title="Плашка BLUE HOUR — сезонная · нажмите, чтобы скопировать ссылку"
                aria-label="Плашка BLUE HOUR — сезонная — скопировать ссылку">
          <img src="ССЫЛКА_НА_ПЛАШКА_02" width="210" height="42" alt="Синий час">
        </button>
        <!-- Предмет 03: замените src и title -->
        <button type="button" class="onair-item" title="Плашка AFTER DARK — лимитная · нажмите, чтобы скопировать ссылку"
                aria-label="Плашка AFTER DARK — лимитная — скопировать ссылку">
          <img src="ССЫЛКА_НА_ПЛАШКА_03" width="210" height="42" alt="После темноты">
        </button>
        <!-- Предмет 04: замените src и title -->
        <button type="button" class="onair-item" title="Плашка LIVE FOREVER — подарок · нажмите, чтобы скопировать ссылку"
                aria-label="Плашка LIVE FOREVER — подарок — скопировать ссылку">
          <img src="ССЫЛКА_НА_ПЛАШКА_04" width="210" height="42" alt="Вечный эфир">
        </button>
        <!-- Предмет 05: замените src и title -->
        <button type="button" class="onair-item" title="Плашка ON THE AIR — ивент · нажмите, чтобы скопировать ссылку"
                aria-label="Плашка ON THE AIR — ивент — скопировать ссылку">
          <img src="ССЫЛКА_НА_ПЛАШКА_05" width="210" height="42" alt="В эфире">
        </button>
        </div>
      </div>
    </section>
  </div>

  <!-- КРЕДИТЫ: горизонтальный скролл, количество в strong -->
  <section class="onair-box onair-credits">
    <div class="onair-box-head"><h3>Кредиты</h3><span class="onair-count">08 ТИКЕТОВ · ЛИСТАТЬ ↔</span></div>
    <div class="onair-ticket-scroll" tabindex="0" aria-label="Кредиты: горизонтальная прокрутка">
      <div class="onair-credit-list">
        <div class="onair-credit-ticket"><span class="onair-credit-icon">✕</span><span class="onair-credit-name">На удаление<small>1 ИСП.</small></span><strong>×01</strong></div>
        <div class="onair-credit-ticket"><span class="onair-credit-icon">✦</span><span class="onair-credit-name">На твинка<small>1 ИСП.</small></span><strong>×01</strong></div>
        <div class="onair-credit-ticket"><span class="onair-credit-icon">◈</span><span class="onair-credit-name">На оформление<small>2 ИСП.</small></span><strong>×02</strong></div>
        <div class="onair-credit-ticket"><span class="onair-credit-icon">⌁</span><span class="onair-credit-name">На рекламу<small>3 ИСП.</small></span><strong>×03</strong></div>
        <div class="onair-credit-ticket"><span class="onair-credit-icon">☼</span><span class="onair-credit-name">На апгрейд<small>1 ИСП.</small></span><strong>×01</strong></div>
      </div>
    </div>
  </section>

  <div class="onair-copy-toast" role="status" aria-live="polite"></div>
  <div class="onair-foot"><span>ON:AIR / АРХИВ ИГРОКА</span><span>Оставайся на своей волне ✦</span></div>
</div>
<script>
/* ON:AIR — копирование ссылок из миниатюр; только этот сценарий требует JS. */
(function () {
  if (window.__onairImageCopyInstalled) return;
  window.__onairImageCopyInstalled = true;

  function fallbackCopy(value) {
    var input = document.createElement('textarea');
    input.value = value;
    input.setAttribute('readonly', '');
    input.style.position = 'fixed';
    input.style.opacity = '0';
    document.body.appendChild(input);
    input.select();
    var copied = false;
    try { copied = document.execCommand('copy'); } catch (err) {}
    document.body.removeChild(input);
    return copied;
  }

  function showMessage(profile, message) {
    var toast = profile.querySelector('.onair-copy-toast');
    if (!toast) return;
    toast.textContent = message;
    toast.classList.add('is-visible');
    clearTimeout(toast._hideTimer);
    toast._hideTimer = setTimeout(function () {
      toast.classList.remove('is-visible');
    }, 1600);
  }

  document.addEventListener('click', function (event) {
    var item = event.target.closest('.onair-profile .onair-item');
    if (!item) return;
    var profile = item.closest('.onair-profile');
    var image = item.querySelector('img');
    if (!image) return;
    // Скопируется ровно то, что вставлено в src. Дополнительное поле не нужно.
    var url = image.getAttribute('src');
    if (!url || url.indexOf('ССЫЛКА_') === 0) {
      showMessage(profile, 'Сначала вставьте ссылку на изображение');
      return;
    }
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(url).then(function () {
        showMessage(profile, 'Ссылка скопирована ✓');
      }).catch(function () {
        showMessage(profile, fallbackCopy(url) ? 'Ссылка скопирована ✓' : 'Не удалось скопировать ссылку');
      });
    } else {
      showMessage(profile, fallbackCopy(url) ? 'Ссылка скопирована ✓' : 'Не удалось скопировать ссылку');
    }
  });
})();
</script>
[/html]

0

2

[hideprofile][html]
<style>
/* ================================================================
  ON:AIR / ЛИЧНАЯ СТРАНИЦА — В СТИЛЕ ИСХОДНОЙ ГОСТЕВОЙ
  01 / ПАЛИТРА: ВСЕ ОСНОВНЫЕ ЦВЕТА МЕНЯЮТСЯ ЗДЕСЬ
  Стили действуют только внутри .onair-profile.
================================================================ */
.onair-profile {
  --pink: #ffb4dc;            /* нежно-розовый */
  --hot-pink: #ff3cac;        /* яркий розовый акцент */
  --blue: #78dcff;            /* холодный голубой */
  --mint: #8ff5ec;            /* мятный */
  --black: #29292d;           /* тёмная музыкальная панель */
  --black-deep: #19191b;      /* тёмный градиент */
  --paper: #fbfaf7;           /* внешняя светлая рамка */
  --glass: rgba(255,255,255,.83); /* карточки фонов, плашек, кредитов */
  --text: #22232a;            /* основной текст */
  --muted: #777783;           /* второстепенный текст */
  --scroll: #a8c4d8;          /* цвет скролла */

  box-sizing: border-box;
  width: 100%; max-width: 790px; margin: 13px auto;
  padding: 18px; border: 2px solid rgba(36,37,43,.93);
  border-radius: 30px; position: relative; overflow: hidden;
  color: var(--text);
  font: 12px/1.45 'Trebuchet MS', Arial, sans-serif;
  background:
    radial-gradient(ellipse at 8% 5%,rgba(120,220,255,.26),transparent 36%),
    radial-gradient(ellipse at 96% 8%,rgba(255,180,220,.33),transparent 38%),
    linear-gradient(145deg,#fff, var(--paper) 88%);
  box-shadow: 0 18px 42px rgba(0,0,0,.14);
}
.onair-profile *, .onair-profile *::before, .onair-profile *::after { box-sizing: border-box; }
.onair-profile h2, .onair-profile h3, .onair-profile p { margin: 0; }

/* 02 / ВЕРХНЯЯ СТРОКА И ЦВЕТНАЯ ОБЛОЖКА */
.onair-profile .onair-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin: 0 4px 12px;
  color: #777; font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase;
}
.onair-profile .onair-logo { font-size: 22px; line-height: 1; letter-spacing: -1px; font-weight: 900; color: #232329; }
.onair-profile .onair-logo b { color: var(--hot-pink); }
.onair-profile .onair-logo small { margin-left: 8px; font-size: 8px; font-weight: normal; letter-spacing: 1.65px; color: #888; vertical-align: middle; }
.onair-profile .onair-live {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border-radius: 999px; padding: 6px 11px;
  background: rgba(255,255,255,.78); border: 1px solid rgba(55,60,69,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.onair-profile .onair-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--hot-pink);
  box-shadow: 0 0 9px rgba(255,60,172,.48);
}
.onair-profile .onair-cover {
  position: relative; height: 107px; overflow: hidden;
  padding: 14px; border-radius: 21px;
  background:
    radial-gradient(ellipse at 13% 0%,rgba(255,255,255,.72),transparent 38%),
    radial-gradient(ellipse at 88% 20%,rgba(255,180,220,.67),transparent 39%),
    linear-gradient(113deg,#ccf4f9 4%,#d1eafb 42%,#fbe0ef 91%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72);
}
.onair-profile .onair-cover::before {
  content: ''; position: absolute; left: 39%; top: -145px;
  width: 360px; height: 260px; border-radius: 50%; transform: rotate(-13deg);
  border: 1px solid rgba(38,55,66,.20);
  box-shadow: 0 0 0 29px rgba(255,255,255,.14),0 0 0 65px rgba(255,255,255,.12),0 0 0 114px rgba(255,255,255,.11);
}
.onair-profile .onair-cover::after {
  content: 'ON AIR'; position: absolute; right: 25px; bottom: -38px;
  color: rgba(47,55,66,.1); font-size: 93px; line-height: 1;
  font-weight: 900; white-space: nowrap; letter-spacing: -8px;
}
.onair-profile .onair-coverline {
  position: relative; z-index: 2; display: inline-block;
  font-size: 9px; color: #4a606b; text-transform: uppercase; letter-spacing: 1.4px;
  background: rgba(255,255,255,.66); border: 1px solid rgba(255,255,255,.8);
  border-radius: 20px; padding: 6px 10px;
}
.onair-profile .onair-cover-deco {
  position: absolute; z-index: 1; right: 93px; top: -35px;
  color: rgba(255,255,255,.65); font-size: 109px; line-height: 1;
  transform: rotate(14deg); pointer-events: none;
}
.onair-profile .onair-cover-frequency {
  position: absolute; z-index: 2; top: 17px; right: 17px;
  color: #65777f; letter-spacing: .9px; font-size: 9px;
}

/* 03 / АВАТАР, ИМЯ, ГРУППА, ПЕСНЯ — ТЁМНЫЙ ON AIR-БЛОК */
.onair-profile .onair-main {
  position: relative; z-index: 3; display: grid;
  grid-template-columns: 88px minmax(0,1fr) 150px;
  align-items: center; gap: 14px;
  margin: -33px 12px 13px; padding: 12px 13px;
  border-radius: 22px; border: 1px solid rgba(255,255,255,.16);
  color: #f7f7fa;
  background:
    radial-gradient(ellipse at 3% 10%,rgba(120,220,255,.16),transparent 35%),
    radial-gradient(ellipse at 95% 95%,rgba(255,180,220,.19),transparent 39%),
    linear-gradient(130deg,var(--black),var(--black-deep));
  box-shadow: 0 10px 22px rgba(31,35,47,.2), inset 0 0 0 1px rgba(255,255,255,.08);
}
.onair-profile .onair-avatar {
  width: 88px; height: 88px; overflow: hidden; border-radius: 15px;
  border: 2px solid rgba(255,255,255,.84);
  background: #47525f; box-shadow: 0 0 0 1px rgba(120,220,255,.53),0 5px 14px rgba(0,0,0,.3);
}
.onair-profile .onair-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.onair-profile .onair-info { min-width: 0; }
.onair-profile .onair-eyebrow {
  display: inline-block; margin-bottom: 5px; padding: 2px 8px;
  font-size: 8px; color: var(--mint); letter-spacing: 1.2px;
  background: rgba(255,255,255,.09); border-radius: 30px;
}
.onair-profile .onair-name { font-size: 27px; line-height: 1.05; color: #fff; font-weight: 900; text-transform: uppercase; letter-spacing: -1px; overflow-wrap: anywhere; }
.onair-profile .onair-subtitle { margin: 5px 0; font-size: 10px; color: #c2c1cb; }
.onair-profile .onair-meta { display: flex; flex-wrap: wrap; gap: 7px; color: #c4c2c9; font-size: 9px; }
.onair-profile .onair-meta strong { color: var(--blue); }
.onair-profile .onair-track {
  min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 9px 8px; border-radius: 12px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.17);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.onair-profile .onair-track-symbol {
  width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center;
  background: linear-gradient(145deg,var(--blue),var(--pink));
  border-radius: 50%; color: #25242d; font-size: 15px;
}
.onair-profile .onair-track-info { min-width: 0; }
.onair-profile .onair-track-label { font-size: 8px; letter-spacing: .4px; color: var(--mint); text-transform: uppercase; }
.onair-profile .onair-track-title { font-size: 11px; color: white; font-weight: bold; overflow-wrap: anywhere; }
.onair-profile .onair-track-artist { font-size: 9px; color: #c6c2cf; }

/* 04 / ДВЕ КОЛЛЕКЦИИ — БЕЛОЕ СТЕКЛО И ПО ДВЕ МИНИАТЮРЫ В РЯД */
.onair-profile .onair-library { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0 12px; }
.onair-profile .onair-box {
  min-width: 0; padding: 11px 13px; border-radius: 18px;
  background: var(--glass); color: var(--text);
  border: 1px solid rgba(255,255,255,.94);
  box-shadow: 0 6px 17px rgba(30,30,35,.09), inset 0 1px 0 #fff;
}
.onair-profile .onair-box-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 9px; }
.onair-profile .onair-box h3 { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; }
/* ЗВЁЗДОЧКА CSS: не использовать HTML-сущность &#...; в content */
.onair-profile .onair-box h3::before { content: '\2733'; margin-right: 7px; font-size: 15px; font-weight: normal; color: var(--hot-pink); }
.onair-profile .onair-count {
  font-size: 8px; letter-spacing: .3px; white-space: nowrap;
  padding: 4px 8px; border-radius: 999px;
  background: rgba(120,220,255,.2); color: #5b6775;
}
.onair-profile .onair-item-scroll {
  height: 100px; overflow-y: scroll; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--scroll) #eaeef1;
}
.onair-profile .onair-item-scroll::-webkit-scrollbar { width: 6px; }
.onair-profile .onair-item-scroll::-webkit-scrollbar-track { background: #eaeef1; border-radius: 8px; }
.onair-profile .onair-item-scroll::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 8px; }
.onair-profile .onair-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; align-content: start; padding: 0 5px 2px 0; }
.onair-profile .onair-item {
  width: 100%; max-width: 210px; aspect-ratio: 5/1;
  padding: 0; border: 0; border-radius: 6px; overflow: hidden;
  background: #eaf1f3; cursor: copy; appearance: none;
  box-shadow: 0 2px 6px rgba(26,33,43,.13);
  transition: transform .15s ease, box-shadow .15s ease;
}
.onair-profile .onair-item img { display: block; width: 100%; height: 100%; object-fit: contain; }
.onair-profile .onair-item:hover { transform: translateY(-1px); box-shadow: 0 4px 9px rgba(30,30,35,.2); }
.onair-profile .onair-item:focus-visible { outline: 2px solid var(--hot-pink); outline-offset: 2px; }

/* 05 / КРЕДИТЫ — НИЗКАЯ ПОЛКА И ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ */
.onair-profile .onair-credits { margin: 12px 12px 0; padding: 8px 13px; }
.onair-profile .onair-credits .onair-box-head { margin-bottom: 6px; }
.onair-profile .onair-ticket-scroll {
  width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 5px;
  scrollbar-width: thin; scrollbar-color: var(--scroll) #eaeef1;
  -webkit-overflow-scrolling: touch;
}
.onair-profile .onair-ticket-scroll::-webkit-scrollbar { height: 7px; }
.onair-profile .onair-ticket-scroll::-webkit-scrollbar-track { background: #eaeef1; border-radius: 7px; }
.onair-profile .onair-ticket-scroll::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 7px; }
.onair-profile .onair-credit-list { display: flex; flex-wrap: nowrap; gap: 8px; }
.onair-profile .onair-credit-ticket {
  display: flex; align-items: center; gap: 7px; flex: 0 0 165px;
  min-height: 35px; border-radius: 10px; padding: 5px 7px;
  background: #fff; border: 1px dashed #d1c9d8;
}
.onair-profile .onair-credit-ticket:nth-child(2) { background: #f1fafe; }
.onair-profile .onair-credit-ticket:nth-child(3) { background: #fff0f8; }
.onair-profile .onair-credit-icon {
  flex: 0 0 23px; width: 23px; height: 23px; display: grid; place-items: center;
  border-radius: 7px; color: white; font-size: 14px;
  background: linear-gradient(135deg,#484951,#23242a);
}
.onair-profile .onair-credit-name { min-width: 0; flex: 1; font-size: 10px; font-weight: bold; line-height: 1.2; }
.onair-profile .onair-credit-name small { display: block; margin-top: 2px; font-size: 8px; color: var(--muted); font-weight: normal; }
.onair-profile .onair-credit-ticket strong { font-size: 11px; color: #ad5490; }

/* 06 / СЛУЖЕБНОЕ СООБЩЕНИЕ О КОПИРОВАНИИ + ПОДВАЛ */
.onair-profile .onair-copy-toast {
  position: fixed; z-index: 9999; bottom: 18px; left: 50%; transform: translateX(-50%);
  padding: 7px 14px; background: #29292d; color: #fff; border-radius: 18px;
  font-size: 11px; opacity: 0; visibility: hidden; pointer-events: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.25); transition: opacity .12s;
}
.onair-profile .onair-copy-toast.is-visible { opacity: 1; visibility: visible; }
.onair-profile .onair-foot {
  display: flex; justify-content: space-between; gap: 10px; margin: 10px 12px 0;
  font-size: 8px; letter-spacing: 1.1px; text-transform: uppercase;
  color: #8c8a91;
}

/* 07 / АДАПТАЦИЯ НА ТЕЛЕФОНАХ: ИЗОБРАЖЕНИЯ ПО-ПРЕЖНЕМУ В ДВА СТОЛБЦА */
@media (max-width: 590px) {
  .onair-profile { padding: 11px; border-radius: 21px; }
  .onair-profile .onair-cover { height: 88px; }
  .onair-profile .onair-main { grid-template-columns: 75px minmax(0,1fr); gap: 10px; margin: -28px 4px 10px; padding: 11px; }
  .onair-profile .onair-avatar { width: 75px; height: 75px; }
  .onair-profile .onair-name { font-size: 23px; }
  .onair-profile .onair-track { grid-column: 1/-1; }
  .onair-profile .onair-library { grid-template-columns: 1fr; margin: 0 4px; gap: 10px; }
  .onair-profile .onair-credits { margin: 10px 4px 0; }
  .onair-profile .onair-cover-frequency { display: none; }
}
@media (max-width: 365px) {
  .onair-profile .onair-logo small { display: none; }
  .onair-profile .onair-name { font-size: 20px; }
  .onair-profile .onair-cover::after { font-size: 70px; bottom: -20px; }
}

</style>

<div class="onair-profile">
  <!-- ШАПКА / ЛОГОТИП -->
  <div class="onair-top">
    <div class="onair-logo">ON<b>:</b>AIR <small>ЛИЧНАЯ СТРАНИЦА</small></div>
    <div class="onair-live"><span class="onair-dot"></span> Игрок в эфире</div>
  </div>

  <!-- ОБЛОЖКА: градиент в CSS .onair-cover. Структуру не менять. -->
  <div class="onair-cover">
    <div class="onair-coverline">Твоя частота / Твоя история / Твой звук</div>
    <span class="onair-cover-deco" aria-hidden="true">✳</span>
    <span class="onair-cover-frequency">ON:AIR · 24/7</span>
  </div>

  <!-- ОСНОВНАЯ ИНФОРМАЦИЯ -->
  <div class="onair-main">
    <!-- АВАТАР (88×88): заменить src -->
    <div class="onair-avatar"><img src="ССЫЛКА_НА_АВАТАР" alt="Аватар игрока"></div>
    <!-- ИМЯ, ФРАЗА, ВОЗРАСТ И ГРУППА -->
    <div class="onair-info">
      <div class="onair-eyebrow">ИГРОК / 001</div>
      <h2 class="onair-name">Seo Changbin</h2>
      <p class="onair-subtitle">у каждого голоса своя частота.</p>
      <div class="onair-meta"><span><strong>27</strong> лет</span><span>/</span><span><strong>Stray Kids</strong> / группа</span></div>
    </div>
    <!-- МОЯ ПЕСНЯ -->
    <div class="onair-track">
      <span class="onair-track-symbol">♫</span>
      <div class="onair-track-info">
        <div class="onair-track-label">Моя песня</div>
        <div class="onair-track-title">VENOM</div>
        <div class="onair-track-artist">Stray Kids</div>
      </div>
    </div>
  </div>

  <!-- ФОНЫ И ПЛАШКИ: два равных блока; в каждом два столбца -->
  <div class="onair-library">
    <!-- КОЛЛЕКЦИЯ «ФОНЫ»: две адаптивные колонки -->
    <section class="onair-box">
      <div class="onair-box-head"><h3>Фоны</h3><span class="onair-count">В КОЛЛЕКЦИИ: 05</span></div>
      <div class="onair-item-scroll">
        <div class="onair-items">
        <!-- Предмет 01: замените src и title -->
        <button type="button" class="onair-item" title="Фон «Голубая волна» — за активность · нажмите, чтобы скопировать ссылку"
                aria-label="Фон «Голубая волна» — за активность — скопировать ссылку">
          <img src="ССЫЛКА_НА_ФОН_01" width="210" height="42" alt="Голубая волна">
        </button>
        <!-- Предмет 02: замените src и title -->
        <button type="button" class="onair-item" title="Фон «Dream Haze» — лимитная награда · нажмите, чтобы скопировать ссылку"
                aria-label="Фон «Dream Haze» — лимитная награда — скопировать ссылку">
          <img src="ССЫЛКА_НА_ФОН_02" width="210" height="42" alt="Дымка">
        </button>
        <!-- Предмет 03: замените src и title -->
        <button type="button" class="onair-item" title="Фон «Sea Glass» — из магазина · нажмите, чтобы скопировать ссылку"
                aria-label="Фон «Sea Glass» — из магазина — скопировать ссылку">
          <img src="ССЫЛКА_НА_ФОН_03" width="210" height="42" alt="Морское стекло">
        </button>
        <!-- Предмет 04: замените src и title -->
        <button type="button" class="onair-item" title="Фон «Static Grey» — подарок · нажмите, чтобы скопировать ссылку"
                aria-label="Фон «Static Grey» — подарок — скопировать ссылку">
          <img src="ССЫЛКА_НА_ФОН_04" width="210" height="42" alt="Серый шум">
        </button>
        <!-- Предмет 05: замените src и title -->
        <button type="button" class="onair-item" title="Фон «After Hours» — награда за конкурс · нажмите, чтобы скопировать ссылку"
                aria-label="Фон «After Hours» — награда за конкурс — скопировать ссылку">
          <img src="ССЫЛКА_НА_ФОН_05" width="210" height="42" alt="После эфира">
        </button>
        </div>
      </div>
    </section>
    <!-- КОЛЛЕКЦИЯ «ПЛАШКИ»: две адаптивные колонки -->
    <section class="onair-box">
      <div class="onair-box-head"><h3>Плашки</h3><span class="onair-count">В КОЛЛЕКЦИИ: 05</span></div>
      <div class="onair-item-scroll">
        <div class="onair-items">
        <!-- Предмет 01: замените src и title -->
        <button type="button" class="onair-item" title="Плашка NIGHT SIGNAL — редкая · нажмите, чтобы скопировать ссылку"
                aria-label="Плашка NIGHT SIGNAL — редкая — скопировать ссылку">
          <img src="ССЫЛКА_НА_ПЛАШКА_01" width="210" height="42" alt="Ночной сигнал">
        </button>
        <!-- Предмет 02: замените src и title -->
        <button type="button" class="onair-item" title="Плашка BLUE HOUR — сезонная · нажмите, чтобы скопировать ссылку"
                aria-label="Плашка BLUE HOUR — сезонная — скопировать ссылку">
          <img src="ССЫЛКА_НА_ПЛАШКА_02" width="210" height="42" alt="Синий час">
        </button>
        <!-- Предмет 03: замените src и title -->
        <button type="button" class="onair-item" title="Плашка AFTER DARK — лимитная · нажмите, чтобы скопировать ссылку"
                aria-label="Плашка AFTER DARK — лимитная — скопировать ссылку">
          <img src="ССЫЛКА_НА_ПЛАШКА_03" width="210" height="42" alt="После темноты">
        </button>
        <!-- Предмет 04: замените src и title -->
        <button type="button" class="onair-item" title="Плашка LIVE FOREVER — подарок · нажмите, чтобы скопировать ссылку"
                aria-label="Плашка LIVE FOREVER — подарок — скопировать ссылку">
          <img src="ССЫЛКА_НА_ПЛАШКА_04" width="210" height="42" alt="Вечный эфир">
        </button>
        <!-- Предмет 05: замените src и title -->
        <button type="button" class="onair-item" title="Плашка ON THE AIR — ивент · нажмите, чтобы скопировать ссылку"
                aria-label="Плашка ON THE AIR — ивент — скопировать ссылку">
          <img src="ССЫЛКА_НА_ПЛАШКА_05" width="210" height="42" alt="В эфире">
        </button>
        </div>
      </div>
    </section>
  </div>

  <!-- КРЕДИТЫ: горизонтальный скролл, количество в strong -->
  <section class="onair-box onair-credits">
    <div class="onair-box-head"><h3>Кредиты</h3><span class="onair-count">08 ТИКЕТОВ · ЛИСТАТЬ ↔</span></div>
    <div class="onair-ticket-scroll" tabindex="0" aria-label="Кредиты: горизонтальная прокрутка">
      <div class="onair-credit-list">
        <div class="onair-credit-ticket"><span class="onair-credit-icon">✕</span><span class="onair-credit-name">На удаление<small>1 ИСП.</small></span><strong>×01</strong></div>
        <div class="onair-credit-ticket"><span class="onair-credit-icon">✦</span><span class="onair-credit-name">На твинка<small>1 ИСП.</small></span><strong>×01</strong></div>
        <div class="onair-credit-ticket"><span class="onair-credit-icon">◈</span><span class="onair-credit-name">На оформление<small>2 ИСП.</small></span><strong>×02</strong></div>
        <div class="onair-credit-ticket"><span class="onair-credit-icon">⌁</span><span class="onair-credit-name">На рекламу<small>3 ИСП.</small></span><strong>×03</strong></div>
        <div class="onair-credit-ticket"><span class="onair-credit-icon">☼</span><span class="onair-credit-name">На апгрейд<small>1 ИСП.</small></span><strong>×01</strong></div>
      </div>
    </div>
  </section>

  <div class="onair-copy-toast" role="status" aria-live="polite"></div>
  <div class="onair-foot"><span>ON:AIR / АРХИВ ИГРОКА</span><span>Оставайся на своей волне ✦</span></div>
</div>

<script>
/* ON:AIR — копирование ссылок из миниатюр; только этот сценарий требует JS. */
(function () {
  if (window.__onairImageCopyInstalled) return;
  window.__onairImageCopyInstalled = true;

  function fallbackCopy(value) {
    var input = document.createElement('textarea');
    input.value = value;
    input.setAttribute('readonly', '');
    input.style.position = 'fixed';
    input.style.opacity = '0';
    document.body.appendChild(input);
    input.select();
    var copied = false;
    try { copied = document.execCommand('copy'); } catch (err) {}
    document.body.removeChild(input);
    return copied;
  }

  function showMessage(profile, message) {
    var toast = profile.querySelector('.onair-copy-toast');
    if (!toast) return;
    toast.textContent = message;
    toast.classList.add('is-visible');
    clearTimeout(toast._hideTimer);
    toast._hideTimer = setTimeout(function () {
      toast.classList.remove('is-visible');
    }, 1600);
  }

  document.addEventListener('click', function (event) {
    var item = event.target.closest('.onair-profile .onair-item');
    if (!item) return;
    var profile = item.closest('.onair-profile');
    var image = item.querySelector('img');
    if (!image) return;
    // Скопируется ровно то, что вставлено в src. Дополнительное поле не нужно.
    var url = image.getAttribute('src');
    if (!url || url.indexOf('ССЫЛКА_') === 0) {
      showMessage(profile, 'Сначала вставьте ссылку на изображение');
      return;
    }
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard.writeText(url).then(function () {
        showMessage(profile, 'Ссылка скопирована ✓');
      }).catch(function () {
        showMessage(profile, fallbackCopy(url) ? 'Ссылка скопирована ✓' : 'Не удалось скопировать ссылку');
      });
    } else {
      showMessage(profile, fallbackCopy(url) ? 'Ссылка скопирована ✓' : 'Не удалось скопировать ссылку');
    }
  });
})();
</script>
[/html]

0


Вы здесь » yanichegoneznayu » готовые штуки » лс


Рейтинг форумов | Создать форум бесплатно