[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]
