.
гостевые
Страница: 1
Сообщений 1 страница 10 из 10
ПеревестиПоделиться12026-05-05 14:41:09
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
Поделиться22026-05-05 15:53:59
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
[hideprofile]
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Гостевая книга | ON:AIR — K-pop шоу</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, 'Segoe UI', 'Poppins', 'Noto Sans KR', sans-serif;
}
body {
background: linear-gradient(145deg, #faf0f5 0%, #f7e9f0 100%);
min-height: 50vh;
padding: 2rem 1.5rem;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
/* Хедер с атмосферой шоу */
.hero {
text-align: center;
margin-bottom: 2.5rem;
}
.hero h1 {
font-size: 3.2rem;
background: linear-gradient(135deg, #FF3B6F, #8B5CF6, #2DD4BF);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.5px;
display: inline-block;
text-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.hero p {
color: #4a4a5a;
font-size: 1.1rem;
margin-top: 0.5rem;
font-weight: 500;
}
.badge-live {
background: #ff2e63;
color: white;
font-size: 0.7rem;
padding: 0.2rem 0.8rem;
border-radius: 40px;
display: inline-block;
margin-top: 0.8rem;
font-weight: 600;
letter-spacing: 1px;
}
/* ГЛАВНАЯ СЕТКА: 2 КОЛОНКИ (мальчики/девочки) */
.two-columns {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 3rem;
}
.column {
flex: 1;
min-width: 280px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(2px);
border-radius: 2rem;
box-shadow: 0 20px 35px -12px rgba(0,0,0,0.15);
overflow: hidden;
transition: transform 0.2s;
border: 1px solid rgba(255,255,240,0.8);
}
.column:hover {
transform: translateY(-5px);
}
.column-header {
padding: 1.2rem 1.5rem;
background: white;
border-bottom: 3px solid;
display: flex;
align-items: center;
gap: 0.6rem;
}
.boys .column-header {
border-bottom-color: #3b82f6;
background: #f0f9ff;
}
.girls .column-header {
border-bottom-color: #ec489a;
background: #fff0f7;
}
.column-header h2 {
font-size: 1.8rem;
font-weight: 700;
}
.boys h2 { color: #2563eb; }
.girls h2 { color: #db2777; }
.entry-list {
padding: 1rem 1.2rem;
max-height: 500px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.9rem;
background: rgba(255,248,245,0.5);
}
/* Стиль карточки гостя: ateez - (ссылка) choi san */
.guest-card {
background: white;
border-radius: 1.2rem;
padding: 0.9rem 1.2rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.02);
transition: all 0.2s;
border: 1px solid #ffe7f0;
word-break: break-word;
}
.guest-card:hover {
border-color: #ffb7c5;
background: #fffbfd;
}
.guest-line {
font-size: 1rem;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem 0.5rem;
}
.group-name {
font-weight: 800;
color: #1e293b;
background: #f1f5f9;
padding: 0.2rem 0.6rem;
border-radius: 40px;
font-size: 0.8rem;
}
.guest-link {
color: #6366f1;
text-decoration: none;
font-weight: 500;
border-bottom: 1px dashed #cbd5e1;
}
.guest-link:hover {
color: #ec489a;
border-bottom-color: #f472b6;
}
.guest-name {
font-weight: 700;
background: linear-gradient(145deg, #2d2f36, #1f1f2a);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 1rem;
}
.empty-message {
text-align: center;
color: #aaa8b8;
font-style: italic;
padding: 2rem;
font-size: 0.9rem;
}
/* ФОРМА ДОБАВЛЕНИЯ (универсальный блок) */
.form-section {
background: white;
border-radius: 2rem;
padding: 1.8rem;
margin-top: 1rem;
box-shadow: 0 20px 35px -12px rgba(0,0,0,0.1);
border: 1px solid #ffe2ef;
}
.form-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.2rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.form-title span {
background: #fdeef4;
padding: 0.2rem 0.8rem;
border-radius: 50px;
font-size: 0.8rem;
}
.form-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}
.input-group {
flex: 1;
min-width: 170px;
}
.input-group label {
display: block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6b6b7e;
margin-bottom: 0.3rem;
}
.input-group input, .input-group select {
width: 100%;
padding: 0.8rem 1rem;
border-radius: 1.2rem;
border: 1.5px solid #edd3df;
background: #fefafc;
font-size: 0.9rem;
transition: 0.2s;
}
.input-group input:focus, .input-group select:focus {
outline: none;
border-color: #f472b6;
box-shadow: 0 0 0 3px rgba(236,72,153,0.1);
}
.gender-selector {
display: flex;
gap: 1rem;
align-items: center;
background: #faf3f7;
padding: 0.4rem 1rem;
border-radius: 3rem;
}
.gender-selector label {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 500;
color: #4a4a5e;
}
.add-button {
background: linear-gradient(95deg, #FF3B6F, #C850C0);
border: none;
padding: 0.8rem 2rem;
border-radius: 3rem;
color: white;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 5px 12px rgba(255,59,111,0.3);
}
.add-button:hover {
transform: scale(1.02);
background: linear-gradient(95deg, #f82b61, #b53cad);
box-shadow: 0 8px 18px rgba(255,59,111,0.4);
}
.sample-note {
font-size: 0.75rem;
color: #857e8c;
margin-top: 0.8rem;
text-align: center;
background: #fcf4f8;
padding: 0.5rem;
border-radius: 2rem;
}
hr {
margin: 1rem 0;
border-color: #ffdae9;
}
footer {
text-align: center;
margin-top: 2rem;
font-size: 0.75rem;
color: #a48f9b;
}
@media (max-width: 780px) {
body {
padding: 1rem;
}
.hero h1 {
font-size: 2.3rem;
}
.column-header h2 {
font-size: 1.4rem;
}
}
/* Скролл для списков красивый */
.entry-list::-webkit-scrollbar {
width: 5px;
}
.entry-list::-webkit-scrollbar-track {
background: #ffecf0;
border-radius: 10px;
}
.entry-list::-webkit-scrollbar-thumb {
background: #f4a0bd;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="hero">
<h1>🎤 ON:AIR <span style="font-size: 2rem;">🎶</span></h1>
<p>музыкальное шоу | корейская волна · гостиная фанатов</p>
<div class="badge-live">✨ LIVE EDITION ✨</div>
</div>
<!-- Два блока: мальчики и девочки -->
<div class="two-columns">
<!-- Блок МАЛЬЧИКИ (BOYS) -->
<div class="column boys">
<div class="column-header">
<span>🧑🎤</span>
<h2>МАЛЬЧИКИ</h2>
<span style="font-size: 0.75rem; background:#eef2ff; padding:0.2rem 0.7rem; border-radius: 30px;">보이그룹</span>
</div>
<div id="boysList" class="entry-list">
<!-- Динамические карточки будут тут -->
<div class="empty-message">✨ пока нет отзывов, добавь своего любимого айдола ✨</div>
</div>
</div>
<!-- Блок ДЕВОЧКИ (GIRLS) -->
<div class="column girls">
<div class="column-header">
<span>👩🎤</span>
<h2>ДЕВОЧКИ</h2>
<span style="font-size: 0.75rem; background:#ffe4f0; padding:0.2rem 0.7rem; border-radius: 30px;">걸그룹</span>
</div>
<div id="girlsList" class="entry-list">
<div class="empty-message">🌸 добавь первую запись для девочек 🌸</div>
</div>
</div>
</div>
<!-- Форма добавления гостя (имя, группа, ссылка, выбор пола) -->
<div class="form-section">
<div class="form-title">
📝 Добавить в гостевую книгу
<span>ON:AIR</span>
</div>
<div class="form-grid">
<div class="input-group">
<label>🌟 Имя артиста / участника</label>
<input type="text" id="artistName" placeholder="например: Choi San, Hanni, Karina ..." autocomplete="off">
</div>
<div class="input-group">
<label>🎤 Группа / сольный проект</label>
<input type="text" id="groupName" placeholder="например: ATEEZ, NewJeans, IVE ..." autocomplete="off">
</div>
<div class="input-group">
<label>🔗 Ссылка (YouTube, Twitter, фан-арт...)</label>
<input type="url" id="linkUrl" placeholder="https://..." autocomplete="off">
</div>
<div class="input-group">
<label>⚧️ Категория</label>
<div class="gender-selector">
<label>
<input type="radio" name="gender" value="boy" checked> 🧑 мальчики
</label>
<label>
<input type="radio" name="gender" value="girl"> 👩 девочки
</label>
</div>
</div>
</div>
<div style="display: flex; justify-content: center; margin-top: 0.5rem;">
<button class="add-button" id="addEntryBtn">➕ Добавить запись →</button>
</div>
<div class="sample-note">
💡 Пример готового стиля: <strong>ATEEZ</strong> - <a href="#" style="text-decoration:none;">(ссылка)</a> <strong>Choi San</strong><br>
Заполни поля и запись появится в выбранном блоке.
</div>
</div>
<footer>
🌟 Гостевая книга шоу ON:AIR — K-pop фан-сообщество. Каждая запись в стиле «группа - (ссылка) имя артиста» 🌟
</footer>
</div>
<script>
// ----- Хранилище данных -----
// Структура: { id, name, group, link, gender } gender: 'boy' / 'girl'
let entries = [];
// Загрузка из localStorage, если есть
function loadFromStorage() {
const saved = localStorage.getItem('onair_guestbook');
if (saved) {
try {
entries = JSON.parse(saved);
} catch(e) { console.warn(e); entries = []; }
}
if (!entries || entries.length === 0) {
// Небольшие демо-записи для красоты, чтобы блоки не были пустыми (но можно и без них, но пусть будет мило)
entries = [
{ id: Date.now() + 1, name: "Choi San", group: "ATEEZ", link: "https://youtu.be/dQw4w9WgXcQ?feature=shared", gender: "boy" },
{ id: Date.now() + 2, name: "Hongjoong", group: "ATEEZ", link: "https://youtube.com", gender: "boy" },
{ id: Date.now() + 3, name: "Hanni", group: "NewJeans", link: "https://youtu.be/example", gender: "girl" },
{ id: Date.now() + 4, name: "Karina", group: "aespa", link: "https://youtu.be/example2", gender: "girl" },
{ id: Date.now() + 5, name: "Yeonjun", group: "TXT", link: "https://youtu.be/example3", gender: "boy" },
{ id: Date.now() + 6, name: "Winter", group: "aespa", link: "https://youtu.be/example4", gender: "girl" }
];
saveToStorage();
}
}
function saveToStorage() {
localStorage.setItem('onair_guestbook', JSON.stringify(entries));
}
// Функция рендеринга двух блоков (мальчики / девочки)
function renderEntries() {
const boysContainer = document.getElementById('boysList');
const girlsContainer = document.getElementById('girlsList');
// Фильтруем записи
const boys = entries.filter(entry => entry.gender === 'boy');
const girls = entries.filter(entry => entry.gender === 'girl');
// Рендер мальчиков
if (boys.length === 0) {
boysContainer.innerHTML = '<div class="empty-message">🎤 пока нет записей для мальчиков, добавь своего любимчика!</div>';
} else {
boysContainer.innerHTML = boys.map(entry => createGuestCardHTML(entry)).join('');
}
// Рендер девочек
if (girls.length === 0) {
girlsContainer.innerHTML = '<div class="empty-message">💖 пока нет записей для девочек, поделись любовью!</div>';
} else {
girlsContainer.innerHTML = girls.map(entry => createGuestCardHTML(entry)).join('');
}
}
// Создание HTML карточки в стиле: ateez - (ссылка) choi san
// По заданию "ateez - (ссылка) choi san"
function createGuestCardHTML(entry) {
// Экранирование спецсимволов для защиты XSS
const safeGroup = escapeHtml(entry.group) || "группа";
const safeName = escapeHtml(entry.name) || "имя";
let safeLink = entry.link ? entry.link.trim() : "#";
// если ссылка невалидная или пустая, то ставим заглушку, но сохраняем возможность клика
if (safeLink === "" || (!safeLink.startsWith("http://") && !safeLink.startsWith("https://"))) {
// если ссылка не начинается с протокола, но не пустая, делаем https префикс? но лучше просто заглушка
if(safeLink !== "#" && safeLink !== "") {
safeLink = "https://" + safeLink;
} else {
safeLink = "#";
}
}
// ссылка с атрибутом target blank для удобства
// создаем элемент согласно стилю: группа - (ссылка) имя
// Шаблон: "<span class=\"group-name\">ATEEZ</span> - <a href='ссылка' class='guest-link' target='_blank'>(ссылка)</a> <span class='guest-name'>Choi San</span>"
return `
<div class="guest-card" data-id="${entry.id}">
<div class="guest-line">
<span class="group-name">${safeGroup}</span>
<span> - </span>
<a href="${safeLink}" class="guest-link" target="_blank" rel="noopener noreferrer">(ссылка)</a>
<span class="guest-name">${safeName}</span>
</div>
</div>
`;
}
// вспомогательная функция экранирования
function escapeHtml(str) {
if (!str) return '';
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
}).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) {
return c;
});
}
// Добавление новой записи
function addEntry() {
// получаем поля
const nameInput = document.getElementById('artistName');
const groupInput = document.getElementById('groupName');
const linkInput = document.getElementById('linkUrl');
const genderRadio = document.querySelector('input[name="gender"]:checked');
let name = nameInput.value.trim();
let group = groupInput.value.trim();
let link = linkInput.value.trim();
const gender = genderRadio ? genderRadio.value : 'boy';
// Валидация: имя и группа обязательны
if (name === "") {
alert("❄️ Пожалуйста, введите Имя артиста / участника!");
return;
}
if (group === "") {
alert("🎶 Укажите группу или сольный проект!");
return;
}
// ссылка необязательна, но если ввели — проверяем протокол, но не строго
let finalLink = link;
if (finalLink !== "" && !finalLink.startsWith("http://") && !finalLink.startsWith("https://")) {
// если пользователь ввел что-то типа "youtube.com/..." попробуем добавить https
finalLink = "https://" + finalLink;
}
// Если ссылка пустая, то оставляем пустую строку, но карточка обработает как #, но лучше чтобы ссылка была с заглушкой -
// но по дизайну ссылка отображается как текст "(ссылка)" – она будет вести на введённый адрес или пустышку.
// Однако в createGuestCardHTML если safeLink пустой, то ставим "#".
if(finalLink === "") finalLink = ""; // тогда внутри функции станет '#', ссылка нерабочая но элемент есть.
// создаем новый объект
const newEntry = {
id: Date.now() + Math.random() * 10000,
name: name,
group: group,
link: finalLink,
gender: gender,
};
entries.push(newEntry);
saveToStorage();
renderEntries();
// очищаем форму, кроме радиокнопки (оставляем выбранный пол как был, удобно)
nameInput.value = "";
groupInput.value = "";
linkInput.value = "";
// можно фокус на имя для удобства
nameInput.focus();
// небольшой фидбек (опционально)
const toastMsg = document.createElement('div');
toastMsg.innerText = `✨ ${name} добавлен в ${gender === 'boy' ? 'мальчики' : 'девочки'} ✨`;
toastMsg.style.position = 'fixed';
toastMsg.style.bottom = '20px';
toastMsg.style.left = '50%';
toastMsg.style.transform = 'translateX(-50%)';
toastMsg.style.backgroundColor = '#1e1a2f';
toastMsg.style.color = '#fff0f5';
toastMsg.style.padding = '0.5rem 1.2rem';
toastMsg.style.borderRadius = '3rem';
toastMsg.style.fontSize = '0.8rem';
toastMsg.style.zIndex = '999';
toastMsg.style.backdropFilter = 'blur(4px)';
toastMsg.style.fontWeight = '500';
document.body.appendChild(toastMsg);
setTimeout(() => toastMsg.remove(), 2000);
}
function initDemoIfEmpty() {
if (entries.length === 0) {
entries = [
{ id: Date.now() + 10, name: "Choi San", group: "ATEEZ", link: "https://youtu.be/ATEEZ_SAN_fancam", gender: "boy" },
{ id: Date.now() + 11, name: "Jeon Soyeon", group: "(G)I-DLE", link: "https://youtu.be/soyeon_queen", gender: "girl" },
{ id: Date.now() + 12, name: "Felix", group: "Stray Kids", link: "https://youtu.be/felix_skz", gender: "boy" },
{ id: Date.now() + 13, name: "Wonyoung", group: "IVE", link: "https://youtu.be/wonyoung_star", gender: "girl" },
{ id: Date.now() + 14, name: "Beomgyu", group: "TXT", link: "https://youtu.be/beomgyu_melody", gender: "boy" }
];
saveToStorage();
}
}
// Обработчик кнопки добавить
document.getElementById('addEntryBtn').addEventListener('click', addEntry);
// Также добавим поддержку Enter в любом поле для удобства (нажатие Enter в любом инпуте добавляет запись)
const inputs = ['artistName', 'groupName', 'linkUrl'];
inputs.forEach(id => {
const el = document.getElementById(id);
if(el) {
el.addEventListener('keypress', function(e) {
if(e.key === 'Enter') {
e.preventDefault();
addEntry();
}
});
}
});
// запуск
loadFromStorage();
initDemoIfEmpty(); // повторная страховка
renderEntries();
</script>
</body>
</html>[/html]
Поделиться32026-05-05 15:55:35
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ON:AIR • Гостевая книга</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, 'Segoe UI', 'Noto Sans KR', sans-serif;
}
body {
background: linear-gradient(145deg, #0b0820, #03000c);
min-height: 100vh;
padding: 2rem 1.5rem;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
/* хедер */
.hero {
text-align: center;
margin-bottom: 2.5rem;
}
.hero h1 {
font-size: 2.8rem;
background: linear-gradient(135deg, #FFB8E7, #AA7AFF, #6EE7FF);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.hero p {
color: #a89ed0;
margin-top: 0.3rem;
}
/* две колонки */
.two-columns {
display: flex;
flex-wrap: wrap;
gap: 2rem;
}
.column {
flex: 1;
min-width: 260px;
background: rgba(25, 20, 50, 0.6);
backdrop-filter: blur(10px);
border-radius: 1.8rem;
border: 1px solid rgba(255, 150, 200, 0.3);
overflow: hidden;
}
.column-header {
padding: 1rem 1.5rem;
border-bottom: 2px solid;
display: flex;
justify-content: space-between;
align-items: center;
}
.boys .column-header { border-bottom-color: #4c6ef5; }
.girls .column-header { border-bottom-color: #f065aa; }
.column-header h2 {
font-size: 1.8rem;
font-weight: 700;
}
.boys h2 { color: #88aaff; }
.girls h2 { color: #ff9ace; }
.counter {
background: rgba(0,0,0,0.5);
padding: 0.2rem 0.7rem;
border-radius: 40px;
font-size: 0.75rem;
color: #ddd9ff;
}
.entry-list {
padding: 1.2rem;
max-height: 500px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.8rem;
}
.guest-card {
background: rgba(35, 28, 65, 0.6);
border-radius: 1.2rem;
padding: 0.8rem 1rem;
border: 1px solid rgba(255, 200, 230, 0.2);
transition: 0.2s;
}
.guest-card:hover {
background: rgba(55, 45, 90, 0.8);
border-color: #ff9fcd;
}
.guest-line {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem 0.6rem;
font-size: 0.95rem;
}
.group-badge {
font-weight: 800;
background: #1e173b;
padding: 0.2rem 0.7rem;
border-radius: 30px;
font-size: 0.75rem;
color: #ffd6ed;
border-left: 2px solid #ff79b0;
}
.guest-link {
color: #b3aaff;
text-decoration: none;
font-size: 0.8rem;
background: rgba(100, 80, 200, 0.3);
padding: 0.1rem 0.55rem;
border-radius: 30px;
}
.guest-link:hover {
background: #c084fc;
color: #0a041f;
}
.guest-name {
font-weight: 700;
background: linear-gradient(145deg, #FFD5F0, #D5B8FF);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
.empty-message {
text-align: center;
color: #a094c2;
padding: 2rem;
font-size: 0.85rem;
font-style: italic;
}
footer {
text-align: center;
margin-top: 2rem;
font-size: 0.7rem;
color: #6f62a0;
}
@media (max-width: 700px) {
.hero h1 { font-size: 2rem; }
.column-header h2 { font-size: 1.4rem; }
}
</style>
</head>
<body>
<div class="container">
<div class="hero">
<h1>🎤 ON:AIR • 게스트북</h1>
<p>музыкальное шоу | гостевая книга фанатов</p>
</div>
<div class="two-columns">
<!-- Мальчики -->
<div class="column boys">
<div class="column-header">
<h2>🧑🎤 МАЛЬЧИКИ</h2>
<div class="counter" id="boysCounter">0</div>
</div>
<div id="boysList" class="entry-list"></div>
</div>
<!-- Девочки -->
<div class="column girls">
<div class="column-header">
<h2>👩🎤 ДЕВОЧКИ</h2>
<div class="counter" id="girlsCounter">0</div>
</div>
<div id="girlsList" class="entry-list"></div>
</div>
</div>
<footer>✨ каждая запись в стиле: группа — (ссылка) имя ✨</footer>
</div>
<script>
// готовые записи в нужном формате
const entries = [
// мальчики
{ group: "ATEEZ", name: "Choi San", link: "https://youtu.be/ATEEZ_SAN", gender: "boy" },
{ group: "ATEEZ", name: "Hongjoong", link: "https://youtu.be/hongjoong", gender: "boy" },
{ group: "Stray Kids", name: "Felix", link: "https://youtu.be/felix_skz", gender: "boy" },
{ group: "TXT", name: "Yeonjun", link: "https://youtu.be/yeonjun", gender: "boy" },
{ group: "BTS", name: "Jungkook", link: "https://youtu.be/jungkook", gender: "boy" },
{ group: "ENHYPEN", name: "Ni-ki", link: "https://youtu.be/niki", gender: "boy" },
// девочки
{ group: "aespa", name: "Karina", link: "https://youtu.be/karina", gender: "girl" },
{ group: "aespa", name: "Winter", link: "https://youtu.be/winter", gender: "girl" },
{ group: "NewJeans", name: "Hanni", link: "https://youtu.be/hanni", gender: "girl" },
{ group: "IVE", name: "Wonyoung", link: "https://youtu.be/wonyoung", gender: "girl" },
{ group: "(G)I-DLE", name: "Soyeon", link: "https://youtu.be/soyeon", gender: "girl" },
{ group: "LE SSERAFIM", name: "Chaewon", link: "https://youtu.be/chaewon", gender: "girl" }
];
function render() {
const boys = entries.filter(e => e.gender === 'boy');
const girls = entries.filter(e => e.gender === 'girl');
document.getElementById('boysCounter').innerText = boys.length;
document.getElementById('girlsCounter').innerText = girls.length;
const boysContainer = document.getElementById('boysList');
const girlsContainer = document.getElementById('girlsList');
boysContainer.innerHTML = boys.map(entry => `
<div class="guest-card">
<div class="guest-line">
<span class="group-badge">${escapeHtml(entry.group)}</span>
<span>–</span>
<a href="${entry.link}" class="guest-link" target="_blank" rel="noopener">(ссылка)</a>
<span class="guest-name">${escapeHtml(entry.name)}</span>
</div>
</div>
`).join('');
girlsContainer.innerHTML = girls.map(entry => `
<div class="guest-card">
<div class="guest-line">
<span class="group-badge">${escapeHtml(entry.group)}</span>
<span>–</span>
<a href="${entry.link}" class="guest-link" target="_blank" rel="noopener">(ссылка)</a>
<span class="guest-name">${escapeHtml(entry.name)}</span>
</div>
</div>
`).join('');
if (boys.length === 0) boysContainer.innerHTML = '<div class="empty-message">✨ пока нет записей ✨</div>';
if (girls.length === 0) girlsContainer.innerHTML = '<div class="empty-message">🌸 пока нет записей 🌸</div>';
}
function escapeHtml(str) {
if (!str) return '';
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
});
}
render();
</script>
</body>
</html>[/html]
Поделиться42026-05-05 15:58:52
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ON:AIR · айдолы</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{background:#faf7f2;font-family:system-ui,sans-serif;padding:24px 16px;}
.wrap{max-width:1000px;margin:0 auto;}
h1{text-align:center;font-size:2rem;background:linear-gradient(135deg,#5e7e8e,#c2826b);-webkit-background-clip:text;background-clip:text;color:transparent;}
.sub{text-align:center;color:#a08d77;font-size:0.75rem;margin-bottom:28px;}
.grid{display:flex;gap:20px;flex-wrap:wrap;}
.card{flex:1;min-width:260px;background:#fff;border-radius:28px;box-shadow:0 4px 12px rgba(0,0,0,0.03);overflow:hidden;}
.head{padding:14px 18px;display:flex;justify-content:space-between;border-bottom:1px solid #f0e4d8;}
.head h2{font-size:1.4rem;font-weight:550;}
.boys .head h2{color:#4f7c8f;}
.girls .head h2{color:#cc867b;}
.cnt{background:#ede3d9;padding:2px 10px;border-radius:30px;font-size:0.7rem;}
.msgs{padding:14px;max-height:460px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;}
.idol{background:#fefbf8;border-radius:20px;padding:12px 16px;border-left:4px solid;}
.boys .idol{border-left-color:#6f9eb3;}
.girls .idol{border-left-color:#e0a196;}
.name{font-weight:600;font-size:0.9rem;color:#3d352c;}
.empty{text-align:center;color:#cbbaa8;padding:30px;}
footer{text-align:center;margin-top:24px;font-size:0.65rem;color:#c2ae9a;}
</style>
</head>
<body>
<div class="wrap">
<h1>🎧 ON:AIR</h1>
<div class="sub">гостевая книга · айдолы</div>
<div class="grid">
<div class="card boys">
<div class="head"><h2>🌟 МАЛЬЧИКИ</h2><span class="cnt" id="bc">0</span></div>
<div class="msgs" id="bl"></div>
</div>
<div class="card girls">
<div class="head"><h2>🌸 ДЕВОЧКИ</h2><span class="cnt" id="gc">0</span></div>
<div class="msgs" id="gl"></div>
</div>
</div>
<footer>✧ только имена айдолов ✧</footer>
</div>
<script>
const data = {
boys: [
"ateez - choi san",
"ateez - kim hongjoong",
"stray kids - bang chan",
"stray kids - lee know",
"txt - choi yeonjun",
"txt - kang taehyun",
"enhypen - jungwon",
"enhypen - ni-ki",
"bts - jungkook",
"bts - jimin",
"nct 127 - taeyong",
"nct dream - jeno",
"seventeen - vernon",
"seventeen - mingyu"
],
girls: [
"aespa - karina",
"aespa - winter",
"blackpink - jennie",
"blackpink - rosé",
"ive - jang wonyoung",
"ive - an yujin",
"newjeans - haerin",
"newjeans - minji",
"gidle - soyeon",
"gidle - miyeon",
"le sserafim - sakura",
"le sserafim - kim chaewon",
"twice - nayeon",
"twice - sana"
]
};
const esc = s => s.replace(/[&<>]/g, m => m=='&'?'&':m=='<'?'<':'>');
const render = () => {
const bl = document.getElementById('bl'), bc = document.getElementById('bc');
bc.innerText = data.boys.length;
bl.innerHTML = data.boys.map(n => `<div class="idol"><div class="name">✨ ${esc(n)}</div></div>`).join('');
const gl = document.getElementById('gl'), gc = document.getElementById('gc');
gc.innerText = data.girls.length;
gl.innerHTML = data.girls.map(n => `<div class="idol"><div class="name">🌸 ${esc(n)}</div></div>`).join('');
};
render();
</script>
</body>
</html>[/html]
Поделиться52026-05-05 15:59:18
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
[hideprofile][html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ON:AIR · айдолы</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #faf7f2;
font-family: system-ui, 'Segoe UI', 'Pretendard', sans-serif;
padding: 30px 20px;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* основная обёртка: картинка слева + блоки справа */
.main-layout {
max-width: 500px;
width: 100%;
margin: 0 auto;
display: flex;
gap: 32px;
align-items: flex-start;
flex-wrap: wrap;
}
/* Левая колонка с микрофоном */
.mic-side {
flex: 0 0 140px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 40px;
}
.mic-icon {
font-size: 90px;
filter: drop-shadow(0 8px 14px rgba(0,0,0,0.08));
transition: transform 0.2s ease;
}
.mic-icon:hover {
transform: scale(1.02);
}
.mic-caption {
text-align: center;
margin-top: 12px;
font-size: 0.7rem;
color: #b8a68c;
letter-spacing: 0.5px;
font-weight: 500;
}
/* Правая колонка (контент) */
.content-right {
flex: 1;
min-width: 260px;
}
/* хедер шоу */
.show-header {
text-align: center;
margin-bottom: 28px;
}
.show-header h1 {
font-size: 2.2rem;
background: linear-gradient(135deg, #5e7e8e, #c2826b);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.3px;
}
.show-header .sub {
color: #a08d77;
font-size: 0.75rem;
margin-top: 4px;
}
/* карточки блоков */
.guest-block {
background: #ffffffec;
border-radius: 32px;
box-shadow: 0 8px 22px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
overflow: hidden;
margin-bottom: 28px;
backdrop-filter: blur(2px);
transition: 0.2s;
}
.guest-block:hover {
transform: translateY(-2px);
}
.block-header {
padding: 14px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #f0e2d6;
}
.block-header h2 {
font-size: 1.5rem;
font-weight: 560;
letter-spacing: -0.2px;
}
.boys .block-header h2 {
color: #4f7c8f;
}
.girls .block-header h2 {
color: #cc867b;
}
.count-badge {
background: #ede3d9;
padding: 4px 14px;
border-radius: 40px;
font-size: 0.7rem;
font-weight: 600;
color: #6e5c4b;
}
/* список айдолов */
.idols-list {
padding: 16px 18px;
max-height: 360px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.idol-card {
background: #fefbf8;
border-radius: 20px;
padding: 12px 16px;
border-left: 5px solid;
transition: 0.05s linear;
}
.boys .idol-card {
border-left-color: #6f9eb3;
}
.girls .idol-card {
border-left-color: #e0a196;
}
.idol-name {
font-weight: 600;
font-size: 0.92rem;
color: #3d352c;
display: flex;
align-items: center;
gap: 8px;
}
.idol-name .emoji-boy {
font-size: 0.9rem;
}
.idol-name .emoji-girl {
font-size: 0.9rem;
}
.empty-message {
text-align: center;
color: #cbbaa8;
padding: 28px 16px;
font-style: italic;
font-size: 0.85rem;
}
footer {
text-align: center;
margin-top: 20px;
font-size: 0.65rem;
color: #c2ae9a;
border-top: 1px solid #efe1d4;
padding-top: 16px;
}
/* скролл */
.idols-list::-webkit-scrollbar {
width: 4px;
}
.idols-list::-webkit-scrollbar-track {
background: #ede3d9;
border-radius: 10px;
}
.idols-list::-webkit-scrollbar-thumb {
background: #cfbaa6;
border-radius: 10px;
}
@media (max-width: 680px) {
.main-layout {
flex-direction: column;
align-items: center;
}
.mic-side {
flex: 0 0 auto;
flex-direction: row;
gap: 12px;
padding-top: 0;
width: 100%;
justify-content: center;
}
.mic-icon {
font-size: 60px;
}
.mic-caption {
margin-top: 0;
}
}
</style>
</head>
<body>
<div class="main-layout">
<!-- левая часть: картинка микрофона -->
<div class="mic-side">
<div class="mic-icon">🎤</div>
<div class="mic-caption">ON AIR · 스튜디오</div>
</div>
<!-- правая часть: контент -->
<div class="content-right">
<div class="show-header">
<h1>🎧 ON:AIR</h1>
<div class="sub">музыкальное шоу · гостевая книга айдолов</div>
</div>
<!-- БЛОК МАЛЬЧИКИ -->
<div class="guest-block boys">
<div class="block-header">
<h2>🌟 МАЛЬЧИКИ</h2>
<span class="count-badge" id="boysCount">0</span>
</div>
<div class="idols-list" id="boysList">
<div class="empty-message">✨ загрузка...</div>
</div>
</div>
<!-- БЛОК ДЕВОЧКИ (под мальчиками) -->
<div class="guest-block girls">
<div class="block-header">
<h2>🌸 ДЕВОЧКИ</h2>
<span class="count-badge" id="girlsCount">0</span>
</div>
<div class="idols-list" id="girlsList">
<div class="empty-message">🌸 загрузка...</div>
</div>
</div>
<footer>✧ только имена айдолов · on:air guestbook ✧</footer>
</div>
</div>
<script>
// список айдолов в формате "группа - имя"
const idolsData = {
boys: [
"ateez - choi san",
"ateez - kim hongjoong",
"stray kids - bang chan",
"stray kids - lee know",
"txt - choi yeonjun",
"txt - kang taehyun",
"enhypen - jungwon",
"enhypen - ni-ki",
"bts - jungkook",
"bts - jimin",
"nct 127 - taeyong",
"nct dream - jeno",
"seventeen - vernon",
"seventeen - mingyu",
"the boyz - juyeon",
"monsta x - shownu"
],
girls: [
"aespa - karina",
"aespa - winter",
"blackpink - jennie",
"blackpink - rosé",
"ive - jang wonyoung",
"ive - an yujin",
"newjeans - haerin",
"newjeans - minji",
"gidle - soyeon",
"gidle - miyeon",
"le sserafim - sakura",
"le sserafim - kim chaewon",
"twice - nayeon",
"twice - sana",
"red velvet - irene",
"itzy - ryujin"
]
};
// защита от XSS
function escapeHtml(str) {
if (!str) return '';
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
});
}
function renderBlocks() {
// мальчики
const boysContainer = document.getElementById('boysList');
const boysCountSpan = document.getElementById('boysCount');
boysCountSpan.innerText = idolsData.boys.length;
if (idolsData.boys.length === 0) {
boysContainer.innerHTML = '<div class="empty-message">💬 пока нет имён</div>';
} else {
boysContainer.innerHTML = idolsData.boys.map(name => `
<div class="idol-card">
<div class="idol-name">
<span class="emoji-boy">✨</span> ${escapeHtml(name)}
</div>
</div>
`).join('');
}
// девочки
const girlsContainer = document.getElementById('girlsList');
const girlsCountSpan = document.getElementById('girlsCount');
girlsCountSpan.innerText = idolsData.girls.length;
if (idolsData.girls.length === 0) {
girlsContainer.innerHTML = '<div class="empty-message">🌸 пока нет имён</div>';
} else {
girlsContainer.innerHTML = idolsData.girls.map(name => `
<div class="idol-card">
<div class="idol-name">
<span class="emoji-girl">🌸</span> ${escapeHtml(name)}
</div>
</div>
`).join('');
}
}
renderBlocks();
</script>
</body>
</html>[/html]
Поделиться62026-05-05 16:02:15
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>ON:AIR | Корейское музыкальное шоу – гостевая книга айдолов</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #fefaf5;
font-family: 'Inter', 'Pretendard', system-ui, -apple-system, 'Segoe UI', 'Noto Sans KR', sans-serif;
min-height: 100vh;
padding: 2rem 2rem 1.5rem;
position: relative;
}
/* фоновые полупрозрачные элементы – визуальный шарм корейского шоу */
body::before {
content: "♪";
font-size: 220px;
position: fixed;
bottom: -30px;
left: -50px;
opacity: 0.03;
font-family: monospace;
pointer-events: none;
transform: rotate(-10deg);
}
body::after {
content: "🎵";
font-size: 180px;
position: fixed;
top: 10%;
right: -40px;
opacity: 0.04;
pointer-events: none;
transform: rotate(15deg);
}
.main-container {
max-width: 1300px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* хедер с атмосферой live-шоу */
.showcase-header {
text-align: center;
margin-bottom: 3rem;
position: relative;
}
.glow-text {
font-size: 3.3rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(125deg, #F15F5F, #FFB347, #6C8C9E);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
display: inline-block;
filter: drop-shadow(0 2px 5px rgba(0,0,0,0.05));
}
.tagline {
background: rgba(255, 248, 235, 0.8);
backdrop-filter: blur(4px);
display: inline-block;
padding: 0.4rem 1.6rem;
border-radius: 60px;
font-size: 0.8rem;
font-weight: 500;
color: #b4815c;
margin-top: 10px;
letter-spacing: 0.3px;
gap: 8px;
align-items: center;
justify-content: center;
}
.tagline span {
display: inline-flex;
align-items: center;
gap: 5px;
}
/* нестандартная сетка: мальчики – вверху слева, девочки – снизу справа */
.dynamic-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 2rem;
margin: 2rem 0 1rem;
position: relative;
}
/* левая зона (здесь находится блок мальчиков и он выше) */
.left-area {
flex: 1.2;
min-width: 280px;
display: flex;
flex-direction: column;
gap: 1.5rem;
}
/* правая зона (содержит “визуальный твист” + блок девочек снизу) */
.right-area {
flex: 0.9;
min-width: 280px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 1.5rem;
}
/* карточка-блок */
.idol-card-block {
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(2px);
border-radius: 2rem;
overflow: hidden;
box-shadow: 0 20px 32px -12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.02);
transition: transform 0.2s ease, box-shadow 0.2s;
border: 1px solid #f7ede2;
}
.idol-card-block:hover {
transform: translateY(-4px);
box-shadow: 0 26px 36px -14px rgba(0, 0, 0, 0.12);
}
/* заголовок блока */
.block-title {
padding: 1rem 1.8rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #ffede1;
flex-wrap: wrap;
}
.title-deco {
display: flex;
align-items: center;
gap: 10px;
}
.title-deco h2 {
font-size: 1.7rem;
font-weight: 640;
letter-spacing: -0.3px;
}
.boys .title-deco h2 { color: #46788e; }
.girls .title-deco h2 { color: #cb7f70; }
.count-pill {
background: #f1e8e0;
padding: 0.25rem 0.9rem;
border-radius: 60px;
font-size: 0.75rem;
font-weight: 600;
color: #6d5c4b;
}
/* список айдолов */
.idol-list {
padding: 1.2rem 1.5rem 1.8rem;
max-height: 440px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.idol-item {
background: #ffffff;
border-radius: 1.5rem;
padding: 0.9rem 1.1rem;
display: flex;
align-items: center;
gap: 12px;
transition: all 0.15s;
border: 1px solid #ffefe2;
box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.boys .idol-item {
border-left: 4px solid #7fa5b9;
}
.girls .idol-item {
border-left: 4px solid #e7b7ab;
}
.idol-avatar {
font-size: 1.7rem;
background: #fcf5ed;
width: 44px;
height: 44px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
}
.idol-info {
flex: 1;
}
.idol-name-text {
font-weight: 600;
font-size: 0.95rem;
color: #2d2a24;
letter-spacing: -0.2px;
}
.group-tag {
font-size: 0.65rem;
color: #b2947c;
margin-top: 2px;
font-weight: 500;
}
/* визуальные корейские элементы (микрофон, свет, эквалайзер) */
.visual-elements {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background: rgba(255, 247, 240, 0.6);
border-radius: 2rem;
padding: 1rem 1.3rem;
margin-bottom: 0.5rem;
gap: 12px;
backdrop-filter: blur(4px);
}
.eq-bars {
display: flex;
align-items: flex-end;
gap: 4px;
height: 32px;
}
.bar {
width: 5px;
background: #dcaea0;
border-radius: 4px;
transition: height 0.2s ease;
animation: pulse 1.4s infinite alternate;
}
.bar:nth-child(1) { height: 12px; animation-delay: 0s; }
.bar:nth-child(2) { height: 24px; animation-delay: 0.2s; background: #c2836b; }
.bar:nth-child(3) { height: 18px; animation-delay: 0.4s; }
.bar:nth-child(4) { height: 28px; animation-delay: 0.1s; background: #c2836b; }
.bar:nth-child(5) { height: 10px; animation-delay: 0.3s; }
@keyframes pulse {
0% { opacity: 0.5; transform: scaleY(0.8); }
100% { opacity: 1; transform: scaleY(1.1); }
}
.live-badge {
background: #ffcfb0;
border-radius: 60px;
padding: 5px 14px;
font-size: 0.75rem;
font-weight: 700;
color: #b4512c;
display: flex;
align-items: center;
gap: 6px;
}
.vinyl-icon {
font-size: 1.5rem;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
/* правый декоративный стафф */
.kpop-quote {
background: #fffdf9;
border-radius: 1.5rem;
padding: 1rem 1.4rem;
text-align: center;
border: 1px solid #faebdd;
font-size: 0.8rem;
color: #b68b6e;
font-style: italic;
backdrop-filter: blur(4px);
}
footer {
margin-top: 3rem;
text-align: center;
font-size: 0.7rem;
color: #d1bfae;
border-top: 1px solid #f6e9de;
padding-top: 1.8rem;
display: flex;
justify-content: center;
gap: 20px;
}
/* скролл */
.idol-list::-webkit-scrollbar {
width: 5px;
}
.idol-list::-webkit-scrollbar-track {
background: #f3ebe2;
border-radius: 10px;
}
.idol-list::-webkit-scrollbar-thumb {
background: #decbb8;
border-radius: 10px;
}
@media (max-width: 780px) {
body { padding: 1rem; }
.dynamic-grid { flex-direction: column; }
.left-area, .right-area { width: 100%; }
.glow-text { font-size: 2.4rem; }
}
</style>
</head>
<body>
<div class="main-container">
<!-- верхняя часть с тематикой ON:AIR -->
<div class="showcase-header">
<div class="glow-text">🎙️ ON:AIR</div>
<div class="tagline">
<span>🎧 KOREAN MUSIC SHOW</span> | <span>📡 LIVE STAGE</span>
</div>
</div>
<!-- динамическая сетка: мальчики вверху слева / девочки снизу справа -->
<div class="dynamic-grid">
<!-- ЛЕВАЯ ЗОНА (содержит блок мальчиков наверху) -->
<div class="left-area">
<!-- Блок МАЛЬЧИКИ — размещается в верхней части левой колонки -->
<div class="idol-card-block boys">
<div class="block-title">
<div class="title-deco">
<span style="font-size:1.7rem;">🌟</span>
<h2>МАЛЬЧИКИ</h2>
</div>
<div class="count-pill" id="boysCount">0</div>
</div>
<div class="idol-list" id="boysList">
<!-- динамический рендер -->
<div class="idol-item" style="justify-content:center; background:transparent;">✨ загрузка...</div>
</div>
</div>
<!-- дополнительный визуальный элемент под мальчиками (эффект студии) -->
<div class="visual-elements">
<div class="eq-bars">
<div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
</div>
<div class="live-badge">
<span>🔴</span> ON AIR
</div>
<div class="vinyl-icon">🎚️🎛️</div>
</div>
</div>
<!-- ПРАВАЯ ЗОНА: сначала свободное пространство, потом блок девочек снизу -->
<div class="right-area">
<!-- Декоративный цитатник / корейский визуал -->
<div class="kpop-quote">
<span>🎤 “음악은 우리의 언어”</span><br>
<span style="font-size:0.7rem;">✧ музыка — наш общий язык ✧</span>
</div>
<!-- Блок ДЕВОЧКИ — снизу справа -->
<div class="idol-card-block girls">
<div class="block-title">
<div class="title-deco">
<span style="font-size:1.7rem;">🌸</span>
<h2>ДЕВОЧКИ</h2>
</div>
<div class="count-pill" id="girlsCount">0</div>
</div>
<div class="idol-list" id="girlsList">
<div class="idol-item" style="justify-content:center; background:transparent;">🌸 загрузка...</div>
</div>
</div>
<!-- ещё один музыкальный штрих -->
<div style="display: flex; justify-content: flex-end; margin-top: 8px;">
<span style="background:#fff5ed; border-radius: 50px; padding:4px 12px; font-size:0.7rem; color:#b98866;">🎶 K-STAGE</span>
</div>
</div>
</div>
<footer>
<span>🎧 ON:AIR guestbook</span>
<span>✧ только айдолы ✧</span>
<span>🎤 music show archive</span>
</footer>
</div>
<script>
// СПИСОК АЙДОЛОВ (формат группа - имя) только имена, без пожеланий
const idolsLibrary = {
boys: [
"ateez - choi san",
"ateez - kim hongjoong",
"stray kids - bang chan",
"stray kids - lee know",
"txt - choi yeonjun",
"txt - kang taehyun",
"enhypen - jungwon",
"enhypen - ni-ki",
"bts - jungkook",
"bts - jimin",
"nct 127 - taeyong",
"nct dream - jeno",
"seventeen - vernon",
"seventeen - mingyu",
"the boyz - juyeon",
"monsta x - shownu",
"exo - baekhyun",
"shinee - taemin"
],
girls: [
"aespa - karina",
"aespa - winter",
"blackpink - jennie",
"blackpink - rosé",
"ive - jang wonyoung",
"ive - an yujin",
"newjeans - haerin",
"newjeans - minji",
"gidle - soyeon",
"gidle - miyeon",
"le sserafim - sakura",
"le sserafim - kim chaewon",
"twice - nayeon",
"twice - sana",
"red velvet - irene",
"itzy - ryujin",
"nmixx - lily",
"fromis_9 - saerom"
]
};
// вспомогательная функция экранирования
function escapeHtml(str) {
if (!str) return '';
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
});
}
// парсим строку "группа - имя" для возможного разделения (для отображения группы в подзаголовке)
function formatIdolItem(fullName) {
const parts = fullName.split(' - ');
if (parts.length === 2) {
return { group: parts[0].trim(), name: parts[1].trim() };
}
return { group: '', name: fullName };
}
// рендер блока мальчиков
function renderBoys() {
const container = document.getElementById('boysList');
const countSpan = document.getElementById('boysCount');
const boysArray = idolsLibrary.boys;
countSpan.innerText = boysArray.length;
if (!boysArray.length) {
container.innerHTML = '<div class="idol-item" style="justify-content:center;">✨ пока нет айдолов</div>';
return;
}
let html = '';
for (let idol of boysArray) {
const { group, name } = formatIdolItem(idol);
const displayName = group ? `${group} - ${name}` : name;
html += `
<div class="idol-item">
<div class="idol-avatar">🎤</div>
<div class="idol-info">
<div class="idol-name-text">${escapeHtml(displayName)}</div>
${group ? `<div class="group-tag">🎧 ${escapeHtml(group)}</div>` : ''}
</div>
<span style="font-size:0.8rem; opacity:0.6;">🎵</span>
</div>
`;
}
container.innerHTML = html;
}
// рендер блока девочек
function renderGirls() {
const container = document.getElementById('girlsList');
const countSpan = document.getElementById('girlsCount');
const girlsArray = idolsLibrary.girls;
countSpan.innerText = girlsArray.length;
if (!girlsArray.length) {
container.innerHTML = '<div class="idol-item" style="justify-content:center;">🌸 пока нет айдолов</div>';
return;
}
let html = '';
for (let idol of girlsArray) {
const { group, name } = formatIdolItem(idol);
const displayName = group ? `${group} - ${name}` : name;
html += `
<div class="idol-item">
<div class="idol-avatar">🎤</div>
<div class="idol-info">
<div class="idol-name-text">${escapeHtml(displayName)}</div>
${group ? `<div class="group-tag">🎧 ${escapeHtml(group)}</div>` : ''}
</div>
<span style="font-size:0.8rem; opacity:0.6;">💗</span>
</div>
`;
}
container.innerHTML = html;
}
// Дополнительный эффект: анимация для эквалайзера (уже через css)
renderBoys();
renderGirls();
// Маленькая анимация для визуала: микрофонная стойка мигает? добавим рандомные имена? готово
// также дополнительно добавляем иконки "винил" в живую
const liveBadge = document.querySelector('.live-badge');
if(liveBadge) {
setInterval(() => {
const dot = liveBadge.querySelector('span');
if(dot) {
dot.style.opacity = dot.style.opacity === '0.4' ? '1' : '0.4';
}
}, 700);
}
</script>
</body>
</html>[/html][hideprofile]
Поделиться72026-05-05 16:34:44
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
[hideprofile]
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Гостевая книга | ON:AIR — K-pop шоу</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, 'Segoe UI', 'Poppins', 'Noto Sans KR', sans-serif;
}
body {
background: linear-gradient(145deg, #faf0f5 0%, #f7e9f0 90%);
min-height: 50vh;
padding: 2rem 1.5rem;
}
.container {
max-width: 700px;
margin: 0 auto;
}
/* Хедер с атмосферой шоу */
.hero {
text-align: center;
margin-bottom: 20px;
}
.hero h1 {
font-size: 23px;
background: linear-gradient(135deg, #FF3B6F, #8B5CF6, #2DD4BF);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
letter-spacing: -0.5px;
display: inline-block;
text-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.hero p {
color: #4a4a5a;
font-size: 15px;
margin-top: 0.5rem;
font-weight: 100;
}
.badge-live {
background: #ff2e63;
color: white;
font-size: 10px;
padding: 0.2rem 0.8rem;
border-radius: 20px;
display: inline-block;
margin-top: 0.8rem;
font-weight: 300;
letter-spacing: 1px;
}
/* ГЛАВНАЯ СЕТКА: 2 КОЛОНКИ (мальчики/девочки) */
.two-columns {
display: flex;
flex-wrap: wrap;
gap: 2rem;
margin-bottom: 3rem;
}
.column {
flex: 1;
min-width: 180px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(2px);
border-radius: 2rem;
box-shadow: 0 20px 35px -12px rgba(0,0,0,0.15);
overflow: hidden;
transition: transform 0.2s;
border: 1px solid rgba(255,255,240,0.8);
}
.column:hover {
transform: translateY(-5px);
}
.column-header {
padding: 1.2rem 1.5rem;
background: white;
border-bottom: 3px solid;
display: flex;
align-items: center;
gap: 0.6rem;
}
.boys .column-header {
border-bottom-color: #3b82f6;
background: #f0f9ff;
}
.girls .column-header {
border-bottom-color: #ec489a;
background: #fff0f7;
}
.column-header h2 {
font-size: 15px;
font-weight: 300;
}
.boys h2 { color: #2563eb; }
.girls h2 { color: #db2777; }
.entry-list {
padding: 1rem 1.2rem;
max-height: 150px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 0.9rem;
background: rgba(255,248,245,0.5);
}
/* Стиль карточки гостя: ateez - (ссылка) choi san */
.guest-card {
background: white;
border-radius: 1.2rem;
padding: 0.9rem 1.2rem;
box-shadow: 0 4px 10px rgba(0,0,0,0.02);
transition: all 0.2s;
border: 1px solid #ffe7f0;
word-break: break-word;
}
.guest-card:hover {
border-color: #ffb7c5;
background: #fffbfd;
}
.guest-line {
font-size: 15px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.3rem 0.5rem;
}
.group-name {
font-weight: 100;
color: #1e293b;
background: #f1f5f9;
padding: 0.2rem 0.6rem;
border-radius: 40px;
font-size: 15px;
}
.guest-link {
color: #6366f1;
text-decoration: none;
font-weight: 100;
border-bottom: 1px dashed #cbd5e1;
}
.guest-link:hover {
color: #ec489a;
border-bottom-color: #f472b6;
}
.guest-name {
font-weight: 100;
background: linear-gradient(145deg, #2d2f36, #1f1f2a);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
font-size: 15px;
}
.empty-message {
text-align: center;
color: #aaa8b8;
font-style: italic;
padding: 2rem;
font-size: 0.9rem;
}
/* ФОРМА ДОБАВЛЕНИЯ (универсальный блок) */
.form-section {
background: white;
border-radius: 2rem;
padding: 1.8rem;
margin-top: 1rem;
box-shadow: 0 20px 35px -12px rgba(0,0,0,0.1);
border: 1px solid #ffe2ef;
}
.form-title {
font-size: 1.5rem;
font-weight: 200;
margin-bottom: 1.2rem;
display: flex;
align-items: center;
gap: 0.6rem;
}
.form-title span {
background: #fdeef4;
padding: 0.2rem 0.8rem;
border-radius: 50px;
font-size: 0.8rem;
}
.form-grid {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}
.input-group {
flex: 1;
min-width: 170px;
}
.input-group label {
display: block;
font-size: 15px;
font-weight: 100;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #6b6b7e;
margin-bottom: 0.3rem;
}
.input-group input, .input-group select {
width: 100%;
padding: 0.8rem 1rem;
border-radius: 1.2rem;
border: 1.5px solid #edd3df;
background: #fefafc;
font-size: 15px;
transition: 0.2s;
}
.input-group input:focus, .input-group select:focus {
outline: none;
border-color: #f472b6;
box-shadow: 0 0 0 3px rgba(236,72,153,0.1);
}
.gender-selector {
display: flex;
gap: 1rem;
align-items: center;
background: #faf3f7;
padding: 0.4rem 1rem;
border-radius: 3rem;
}
.gender-selector label {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 200;
color: #4a4a5e;
}
.add-button {
background: linear-gradient(95deg, #FF3B6F, #C850C0);
border: none;
padding: 0.8rem 2rem;
border-radius: 3rem;
color: white;
font-weight: bold;
font-size: 1rem;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 5px 12px rgba(255,59,111,0.3);
}
.add-button:hover {
transform: scale(1.02);
background: linear-gradient(95deg, #f82b61, #b53cad);
box-shadow: 0 8px 18px rgba(255,59,111,0.4);
}
.sample-note {
font-size: 5px;
color: #857e8c;
margin-top: 0.8rem;
text-align: center;
background: #fcf4f8;
padding: 0.5rem;
border-radius: 2rem;
}
hr {
margin: 1rem 0;
border-color: #ffdae9;
}
footer {
text-align: center;
margin-top: 2rem;
font-size: 10px;
color: #a48f9b;
}
@media (max-width: 480px) {
body {
padding: 1rem;
}
.hero h1 {
font-size: 15px;
}
.column-header h2 {
font-size: 10px;
}
}
/* Скролл для списков красивый */
.entry-list::-webkit-scrollbar {
width: 5px;
}
.entry-list::-webkit-scrollbar-track {
background: #ffecf0;
border-radius: 10px;
}
.entry-list::-webkit-scrollbar-thumb {
background: #f4a0bd;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="hero">
<h1>🎤 ON:AIR <span style="font-size: 2rem;">🎶</span></h1>
<p>музыкальное шоу | корейская волна · гостиная фанатов</p>
<div class="badge-live">✨ LIVE EDITION ✨</div>
</div>
<!-- Два блока: мальчики и девочки -->
<div class="two-columns">
<!-- Блок МАЛЬЧИКИ (BOYS) -->
<div class="column boys">
<div class="column-header">
<span>🧑🎤</span>
<h2>МАЛЬЧИКИ</h2>
<span style="font-size: 0.75rem; background:#eef2ff; padding:0.2rem 0.7rem; border-radius: 30px;">보이그룹</span>
</div>
<div id="boysList" class="entry-list">
<!-- Динамические карточки будут тут -->
<div class="empty-message">✨ пока нет отзывов, добавь своего любимого айдола ✨</div>
</div>
</div>
<!-- Блок ДЕВОЧКИ (GIRLS) -->
<div class="column girls">
<div class="column-header">
<span>👩🎤</span>
<h2>ДЕВОЧКИ</h2>
<span style="font-size: 0.75rem; background:#ffe4f0; padding:0.2rem 0.7rem; border-radius: 30px;">걸그룹</span>
</div>
<div id="girlsList" class="entry-list">
<div class="empty-message">🌸 добавь первую запись для девочек 🌸</div>
</div>
</div>
</div>
<!-- Форма добавления гостя (имя, группа, ссылка, выбор пола) -->
<div class="form-section">
<div class="form-title">
📝 Добавить в гостевую книгу
<span>ON:AIR</span>
</div>
<div class="form-grid">
<div class="input-group">
<label>🌟 Имя артиста / участника</label>
<input type="text" id="artistName" placeholder="например: Choi San, Hanni, Karina ..." autocomplete="off">
</div>
<div class="input-group">
<label>🎤 Группа / сольный проект</label>
<input type="text" id="groupName" placeholder="например: ATEEZ, NewJeans, IVE ..." autocomplete="off">
</div>
<div class="input-group">
<label>🔗 Ссылка (YouTube, Twitter, фан-арт...)</label>
<input type="url" id="linkUrl" placeholder="https://..." autocomplete="off">
</div>
<div class="input-group">
<label>⚧ Категория</label>
<div class="gender-selector">
<label>
<input type="radio" name="gender" value="boy" checked> 🧑 мальчики
</label>
<label>
<input type="radio" name="gender" value="girl"> 👩 девочки
</label>
</div>
</div>
</div>
<div style="display: flex; justify-content: center; margin-top: 0.5rem;">
<button class="add-button" id="addEntryBtn">➕ Добавить запись →</button>
</div>
<div class="sample-note">
💡 Пример готового стиля: <strong>ATEEZ</strong> - <a href="#" style="text-decoration:none;">(ссылка)</a> <strong>Choi San</strong><br>
Заполни поля и запись появится в выбранном блоке.
</div>
</div>
<footer>
🌟 Гостевая книга шоу ON:AIR — K-pop фан-сообщество. Каждая запись в стиле «группа - (ссылка) имя артиста» 🌟
</footer>
</div>
<script>
// ----- Хранилище данных -----
// Структура: { id, name, group, link, gender } gender: 'boy' / 'girl'
let entries = [];
// Загрузка из localStorage, если есть
function loadFromStorage() {
const saved = localStorage.getItem('onair_guestbook');
if (saved) {
try {
entries = JSON.parse(saved);
} catch(e) { console.warn(e); entries = []; }
}
if (!entries || entries.length === 0) {
// Небольшие демо-записи для красоты, чтобы блоки не были пустыми (но можно и без них, но пусть будет мило)
entries = [
{ id: Date.now() + 1, name: "Choi San", group: "ATEEZ", link: "https://youtu.be/dQw4w9WgXcQ?feature=shared", gender: "boy" },
{ id: Date.now() + 2, name: "Hongjoong", group: "ATEEZ", link: "https://youtube.com", gender: "boy" },
{ id: Date.now() + 3, name: "Hanni", group: "NewJeans", link: "https://youtu.be/example", gender: "girl" },
{ id: Date.now() + 4, name: "Karina", group: "aespa", link: "https://youtu.be/example2", gender: "girl" },
{ id: Date.now() + 5, name: "Yeonjun", group: "TXT", link: "https://youtu.be/example3", gender: "boy" },
{ id: Date.now() + 6, name: "Winter", group: "aespa", link: "https://youtu.be/example4", gender: "girl" }
];
saveToStorage();
}
}
function saveToStorage() {
localStorage.setItem('onair_guestbook', JSON.stringify(entries));
}
// Функция рендеринга двух блоков (мальчики / девочки)
function renderEntries() {
const boysContainer = document.getElementById('boysList');
const girlsContainer = document.getElementById('girlsList');
// Фильтруем записи
const boys = entries.filter(entry => entry.gender === 'boy');
const girls = entries.filter(entry => entry.gender === 'girl');
// Рендер мальчиков
if (boys.length === 0) {
boysContainer.innerHTML = '<div class="empty-message">🎤 пока нет записей для мальчиков, добавь своего любимчика!</div>';
} else {
boysContainer.innerHTML = boys.map(entry => createGuestCardHTML(entry)).join('');
}
// Рендер девочек
if (girls.length === 0) {
girlsContainer.innerHTML = '<div class="empty-message">💖 пока нет записей для девочек, поделись любовью!</div>';
} else {
girlsContainer.innerHTML = girls.map(entry => createGuestCardHTML(entry)).join('');
}
}
// Создание HTML карточки в стиле: ateez - (ссылка) choi san
// По заданию "ateez - (ссылка) choi san"
function createGuestCardHTML(entry) {
// Экранирование спецсимволов для защиты XSS
const safeGroup = escapeHtml(entry.group) || "группа";
const safeName = escapeHtml(entry.name) || "имя";
let safeLink = entry.link ? entry.link.trim() : "#";
// если ссылка невалидная или пустая, то ставим заглушку, но сохраняем возможность клика
if (safeLink === "" || (!safeLink.startsWith("http://") && !safeLink.startsWith("https://"))) {
// если ссылка не начинается с протокола, но не пустая, делаем https префикс? но лучше просто заглушка
if(safeLink !== "#" && safeLink !== "") {
safeLink = "https://" + safeLink;
} else {
safeLink = "#";
}
}
// ссылка с атрибутом target blank для удобства
// создаем элемент согласно стилю: группа - (ссылка) имя
// Шаблон: "<span class=\"group-name\">ATEEZ</span> - <a href='ссылка' class='guest-link' target='_blank'>(ссылка)</a> <span class='guest-name'>Choi San</span>"
return `
<div class="guest-card" data-id="${entry.id}">
<div class="guest-line">
<span class="group-name">${safeGroup}</span>
<span> - </span>
<a href="${safeLink}" class="guest-link" target="_blank" rel="noopener noreferrer">(ссылка)</a>
<span class="guest-name">${safeName}</span>
</div>
</div>
`;
}
// вспомогательная функция экранирования
function escapeHtml(str) {
if (!str) return '';
return str.replace(/[&<>]/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
return m;
}).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) {
return c;
});
}
// Добавление новой записи
function addEntry() {
// получаем поля
const nameInput = document.getElementById('artistName');
const groupInput = document.getElementById('groupName');
const linkInput = document.getElementById('linkUrl');
const genderRadio = document.querySelector('input[name="gender"]:checked');
let name = nameInput.value.trim();
let group = groupInput.value.trim();
let link = linkInput.value.trim();
const gender = genderRadio ? genderRadio.value : 'boy';
// Валидация: имя и группа обязательны
if (name === "") {
alert("❄ Пожалуйста, введите Имя артиста / участника!");
return;
}
if (group === "") {
alert("🎶 Укажите группу или сольный проект!");
return;
}
// ссылка необязательна, но если ввели — проверяем протокол, но не строго
let finalLink = link;
if (finalLink !== "" && !finalLink.startsWith("http://") && !finalLink.startsWith("https://")) {
// если пользователь ввел что-то типа "youtube.com/..." попробуем добавить https
finalLink = "https://" + finalLink;
}
// Если ссылка пустая, то оставляем пустую строку, но карточка обработает как #, но лучше чтобы ссылка была с заглушкой -
// но по дизайну ссылка отображается как текст "(ссылка)" – она будет вести на введённый адрес или пустышку.
// Однако в createGuestCardHTML если safeLink пустой, то ставим "#".
if(finalLink === "") finalLink = ""; // тогда внутри функции станет '#', ссылка нерабочая но элемент есть.
// создаем новый объект
const newEntry = {
id: Date.now() + Math.random() * 10000,
name: name,
group: group,
link: finalLink,
gender: gender,
};
entries.push(newEntry);
saveToStorage();
renderEntries();
// очищаем форму, кроме радиокнопки (оставляем выбранный пол как был, удобно)
nameInput.value = "";
groupInput.value = "";
linkInput.value = "";
// можно фокус на имя для удобства
nameInput.focus();
// небольшой фидбек (опционально)
const toastMsg = document.createElement('div');
toastMsg.innerText = `✨ ${name} добавлен в ${gender === 'boy' ? 'мальчики' : 'девочки'} ✨`;
toastMsg.style.position = 'fixed';
toastMsg.style.bottom = '20px';
toastMsg.style.left = '50%';
toastMsg.style.transform = 'translateX(-50%)';
toastMsg.style.backgroundColor = '#1e1a2f';
toastMsg.style.color = '#fff0f5';
toastMsg.style.padding = '0.5rem 1.2rem';
toastMsg.style.borderRadius = '3rem';
toastMsg.style.fontSize = '0.8rem';
toastMsg.style.zIndex = '999';
toastMsg.style.backdropFilter = 'blur(4px)';
toastMsg.style.fontWeight = '500';
document.body.appendChild(toastMsg);
setTimeout(() => toastMsg.remove(), 2000);
}
function initDemoIfEmpty() {
if (entries.length === 0) {
entries = [
{ id: Date.now() + 10, name: "Choi San", group: "ATEEZ", link: "https://youtu.be/ATEEZ_SAN_fancam", gender: "boy" },
{ id: Date.now() + 11, name: "Jeon Soyeon", group: "(G)I-DLE", link: "https://youtu.be/soyeon_queen", gender: "girl" },
{ id: Date.now() + 12, name: "Felix", group: "Stray Kids", link: "https://youtu.be/felix_skz", gender: "boy" },
{ id: Date.now() + 13, name: "Wonyoung", group: "IVE", link: "https://youtu.be/wonyoung_star", gender: "girl" },
{ id: Date.now() + 14, name: "Beomgyu", group: "TXT", link: "https://youtu.be/beomgyu_melody", gender: "boy" }
];
saveToStorage();
}
}
// Обработчик кнопки добавить
document.getElementById('addEntryBtn').addEventListener('click', addEntry);
// Также добавим поддержку Enter в любом поле для удобства (нажатие Enter в любом инпуте добавляет запись)
const inputs = ['artistName', 'groupName', 'linkUrl'];
inputs.forEach(id => {
const el = document.getElementById(id);
if(el) {
el.addEventListener('keypress', function(e) {
if(e.key === 'Enter') {
e.preventDefault();
addEntry();
}
});
}
});
// запуск
loadFromStorage();
initDemoIfEmpty(); // повторная страховка
renderEntries();
</script>
</body>
</html>[/html]
Поделиться82026-06-25 18:43:09
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
[hideprofile][html]
<div class="oa-guest">
<div class="oa-guest-card">
<!--
ШАПКА ГОСТЕВОЙ.
ЗДЕСЬ МЕНЯЕМ: МАЛЕНЬКУЮ ПОДПИСЬ, БОЛЬШОЙ ЗАГОЛОВОК И ПОДЗАГОЛОВОК.
-->
<div class="oa-guest-top">
<div>
<span>ON:AIR GUEST</span>
<h2>гостевая</h2>
<em>придержать внешность / задать вопрос / найти своих</em>
</div>
<!--
ПРАВЫЙ БЛОК В ШАПКЕ.
ЗДЕСЬ МЕНЯЕМ: ЗНАЧОК ✦ И КОРОТКУЮ ПОДПИСЬ.
-->
<div class="oa-guest-badge">
<b>✦</b>
<span>face claim check</span>
</div>
</div>
<div class="oa-guest-body">
<!--
ЛЕВЫЙ ЧЁРНЫЙ ON AIR-БЛОК.
ЗДЕСЬ МЕНЯЕМ: GUEST ON AIR, WELCOME ROOM, ГОСТЕВАЯ, ФРАЗУ ПОД НАЗВАНИЕМ И МИНИ-ТЕГИ.
-->
<div class="oa-guest-machine">
<div class="oa-guest-display">
<div class="oa-guest-live">
<i></i>
<b>GUEST ON AIR</b>
</div>
<div class="oa-guest-title">
<span>welcome room</span>
<b>гостевая</b>
<em>зашёл — придержал эфир</em>
</div>
<div class="oa-guest-equalizer">
<i></i><i></i><i></i><i></i><i></i>
</div>
<!--
МИНИ-ТЕГИ.
ЛУЧШЕ ПИСАТЬ КОРОТКО: RESERVE, CLAIM, CODE, HELP, FACE.
-->
<div class="oa-guest-tags">
<span>reserve</span>
<span>claim</span>
<span>code</span>
<span>help</span>
</div>
<div class="oa-guest-caption">
appearance reservation desk
</div>
</div>
</div>
<!--
ПРАВОЕ ОСНОВНОЕ ОКНО.
СТРУКТУРА: ОПИСАНИЕ → BOYS/GIRLS → ГЕНЕРАТОР КОДА.
-->
<div class="oa-guest-panel">
<!--
ОПИСАНИЕ ГОСТЕВОЙ.
ЗДЕСЬ МЕНЯЕМ ПРИВЕТСТВИЕ, ПРАВИЛА, СРОКИ ПРИДЕРЖАНИЯ И ОБЩИЙ ТЕКСТ.
-->
<div class="oa-guest-info">
<h3>привет!</h3>
<p>
Ты находишься в гостевой <b>ON:AIR</b> — здесь можно задать вопрос, найти соигроков,
уточнить занятость внешности и придержать понравившийся фейс до регистрации.
</p>
<p>
Внешность держится <b>3 дня</b> с возможностью продления ещё на <b>2 дня</b>.
Для придержания заполни форму ниже или оставь код в теме вручную.
</p>
</div>
<div class="oa-guest-main">
<div class="oa-guest-lists">
<!--
БЛОК BOYS.
СЮДА АДМИНЫ ВНОСЯТ ПРИДЕРЖАННЫЕ МУЖСКИЕ ВНЕШНОСТИ.
МОЖНО МЕНЯТЬ ЗАГОЛОВОК BOYS И ТЕКСТ ВНУТРИ .oa-claim-text.
-->
<div class="oa-claim-box">
<h4>boys</h4>
<div class="oa-claim-text">
<b>★ за амс</b><br>
[solo] — park jaebeom<br>
[nct] — lee jeno<br>
[nct] — na jaemin<br>
[zb1] — park gunwook<br><br>
<b>★ до 27.05</b><br>
[actor] — имя фамилия<br>
[solo] — имя фамилия
</div>
</div>
<!--
БЛОК GIRLS.
СЮДА АДМИНЫ ВНОСЯТ ПРИДЕРЖАННЫЕ ЖЕНСКИЕ ВНЕШНОСТИ.
МОЖНО МЕНЯТЬ ЗАГОЛОВОК GIRLS И ТЕКСТ ВНУТРИ .oa-claim-text.
-->
<div class="oa-claim-box">
<h4>girls</h4>
<div class="oa-claim-text">
<b>★ за амс</b><br>
[actress] — lee ji-eun<br><br>
<b>★ до 27.05</b><br>
[kep1er] — shen xiaoting<br>
[solo] — имя фамилия
</div>
</div>
</div>
<!--
ГЕНЕРАТОР КОДА.
ЗДЕСЬ МЕНЯЕМ PLACEHOLDER У ПОЛЕЙ И ТЕКСТЫ НА КНОПКАХ.
КОД КОПИРУЕТСЯ В ФОРМАТЕ:
[group] - <a href="ссылка_на_профиль">name surname</a><br>
ID НЕ ТРОГАТЬ — ОНИ НУЖНЫ ДЛЯ СКРИПТА.
-->
<div class="oa-guest-form code-generator">
<div class="notification" id="result"></div>
<div class="oa-guest-form-title">
<b>код придержания</b>
<span>заполни поля и скопируй готовый шаблон</span>
</div>
<div class="input-fields oa-guest-fields">
<input type="text" id="type" placeholder="group | solo | actor/actress">
<input type="text" id="name" placeholder="name surname">
<input type="text" id="link" placeholder="ссылка_на_профиль">
</div>
<div class="oa-guest-buttons">
<button type="button" id="copyButton">скопировать код</button>
<button type="button" id="copyWithoutLinkButton">скопировать без ссылки</button>
</div>
<div class="oa-guest-status">
код скопируется автоматически после нажатия на кнопку
</div>
<textarea id="hiddenTextarea" aria-hidden="true"></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/*
ОБЩАЯ КАРТА ЦВЕТОВ ON:AIR.
ЕСЛИ У ВАС ЭТА КАРТА УЖЕ ЕСТЬ В ОБЩЕМ CSS ФОРУМА, ЭТОТ БЛОК МОЖНО НЕ ДУБЛИРОВАТЬ.
МЕНЯЕМ ЦВЕТА ТУТ — И ВСЕ БЛОКИ, КОТОРЫЕ ПОДВЯЗАНЫ К --OA-GLOBAL-..., МЕНЯЮТСЯ ВМЕСТЕ.
*/
:root {
--oa-global-pink: #ffb4dc;
--oa-global-hot-pink: #ff3cac;
--oa-global-red: #ff6b6b;
--oa-global-blue: #78dcff;
--oa-global-mint: #8ff5ec;
--oa-global-pink-soft: rgba(255,180,220,.28);
--oa-global-pink-glow: rgba(255,180,220,.17);
--oa-global-blue-soft: rgba(120,220,255,.22);
--oa-global-blue-glow: rgba(120,220,255,.18);
--oa-global-mint-glow: rgba(143,245,236,.35);
--oa-global-dark: #2f2f31;
--oa-global-darker: #19191b;
--oa-global-soft: rgba(244,241,234,.95);
--oa-global-light: rgba(255,255,255,.86);
--oa-global-glass: rgba(255,255,255,.72);
--oa-global-text: #222;
--oa-global-copy: #666;
--oa-global-muted: #777;
--oa-global-overline: #999;
--oa-global-white: #fff;
--oa-global-border: rgba(30,30,30,.9);
--oa-global-shadow: rgba(0,0,0,.15);
--oa-global-font: Trebuchet MS, Arial, sans-serif;
}
/*
ПОДВЯЗКА ГОСТЕВОЙ К ОБЩЕЙ КАРТЕ ЦВЕТОВ.
ЗДЕСЬ НЕ СТАВИМ ОТДЕЛЬНЫЕ ЦВЕТА, А БЕРЁМ ИХ ИЗ :ROOT.
*/
.oa-guest {
--oa-pink: var(--oa-global-pink, #ffb4dc);
--oa-hot-pink: var(--oa-global-hot-pink, #ff3cac);
--oa-red: var(--oa-global-red, #ff6b6b);
--oa-blue: var(--oa-global-blue, #78dcff);
--oa-mint: var(--oa-global-mint, #8ff5ec);
--oa-pink-soft: var(--oa-global-pink-soft, rgba(255,180,220,.28));
--oa-pink-glow: var(--oa-global-pink-glow, rgba(255,180,220,.17));
--oa-blue-soft: var(--oa-global-blue-soft, rgba(120,220,255,.22));
--oa-blue-glow: var(--oa-global-blue-glow, rgba(120,220,255,.18));
--oa-mint-glow: var(--oa-global-mint-glow, rgba(143,245,236,.35));
--oa-dark: var(--oa-global-dark, #2f2f31);
--oa-darker: var(--oa-global-darker, #19191b);
--oa-soft: var(--oa-global-soft, rgba(244,241,234,.95));
--oa-light: var(--oa-global-light, rgba(255,255,255,.86));
--oa-glass: var(--oa-global-glass, rgba(255,255,255,.72));
--oa-text: var(--oa-global-text, #222);
--oa-copy: var(--oa-global-copy, #666);
--oa-muted: var(--oa-global-muted, #777);
--oa-overline: var(--oa-global-overline, #999);
--oa-white: var(--oa-global-white, #fff);
--oa-border: var(--oa-global-border, rgba(30,30,30,.9));
--oa-shadow: var(--oa-global-shadow, rgba(0,0,0,.15));
width: min(900px, 100%);
max-width: calc(100vw - 20px);
margin: 30px auto;
font-family: var(--oa-global-font, Trebuchet MS, Arial, sans-serif);
color: var(--oa-text);
}
.oa-guest,
.oa-guest *,
.oa-guest *:before,
.oa-guest *:after {
box-sizing: border-box;
}
.oa-guest-card {
padding: 26px;
border-radius: 36px;
background:
radial-gradient(circle at 10% 0%, var(--oa-blue-soft), transparent 32%),
radial-gradient(circle at 90% 8%, var(--oa-pink-soft), transparent 34%),
linear-gradient(135deg, var(--oa-white), #fbfaf7);
box-shadow: 0 18px 45px var(--oa-shadow);
border: 2px solid var(--oa-border);
}
/*
ШАПКА.
ЗДЕСЬ МЕНЯЮТСЯ РАЗМЕРЫ, ШРИФТЫ И ОТСТУПЫ ВЕРХНЕЙ ЧАСТИ.
*/
.oa-guest-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 22px;
}
.oa-guest-top span {
display: block;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--oa-overline);
}
.oa-guest-top h2 {
margin: 4px 0 4px;
font-size: 38px;
line-height: 1;
font-family: Georgia, serif;
font-style: italic;
font-weight: normal;
}
.oa-guest-top em {
font-style: normal;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--oa-muted);
}
.oa-guest-badge {
min-width: 155px;
padding: 13px 16px;
border-radius: 22px;
background: var(--oa-glass);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
text-align: right;
}
.oa-guest-badge b {
display: block;
font-size: 28px;
line-height: 1;
color: var(--oa-hot-pink);
}
.oa-guest-badge span {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--oa-muted);
}
/*
ОБЩАЯ СЕТКА.
245PX — ШИРИНА ЧЁРНОГО БЛОКА СЛЕВА.
1FR — ПРАВОЕ ИНФОРМАТИВНОЕ ОКНО.
*/
.oa-guest-body {
display: grid;
grid-template-columns: 245px 1fr;
gap: 22px;
align-items: stretch;
}
/*
ЛЕВЫЙ ЧЁРНЫЙ БЛОК.
ТУТ МЕНЯЮТСЯ РАЗМЕРЫ, ФОН, ОТСТУПЫ И СКРУГЛЕНИЯ ON AIR-БЛОКА.
*/
.oa-guest-machine {
border-radius: 30px;
padding: 16px;
background:
linear-gradient(180deg, var(--oa-dark), var(--oa-darker));
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.12),
0 16px 30px rgba(0,0,0,.18);
}
.oa-guest-display {
position: relative;
min-height: 390px;
height: 100%;
border-radius: 24px;
overflow: hidden;
padding: 18px;
background:
radial-gradient(circle at 80% 10%, var(--oa-pink-glow), transparent 35%),
radial-gradient(circle at 15% 85%, var(--oa-blue-glow), transparent 34%),
linear-gradient(135deg, rgba(255,255,255,.16), rgba(120,220,255,.06));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.oa-guest-display:after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.16) 45%, transparent 58%);
pointer-events: none;
}
.oa-guest-live {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 9px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(0,0,0,.28);
color: var(--oa-white);
font-size: 11px;
letter-spacing: 2px;
}
.oa-guest-live i {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--oa-hot-pink);
box-shadow: 0 0 12px rgba(255,60,172,.75);
}
.oa-guest-title {
position: relative;
z-index: 2;
margin-top: 26px;
color: var(--oa-white);
}
.oa-guest-title span {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 3px;
color: rgba(255,255,255,.62);
}
.oa-guest-title b {
display: block;
margin-top: 8px;
font-size: 31px;
line-height: 1.05;
font-family: var(--oa-global-font, Trebuchet MS, Arial, sans-serif);
font-weight: bold;
text-transform: lowercase;
letter-spacing: -.5px;
}
.oa-guest-title em {
display: block;
margin-top: 12px;
padding: 10px 12px;
border-radius: 16px;
background: rgba(255,255,255,.10);
font-style: normal;
font-size: 12px;
line-height: 1.35;
color: rgba(255,255,255,.82);
}
.oa-guest-equalizer {
position: relative;
z-index: 2;
height: 74px;
margin-top: 32px;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 8px;
}
.oa-guest-equalizer i {
display: block;
width: 12px;
border-radius: 999px;
background: linear-gradient(180deg, var(--oa-mint), var(--oa-pink));
box-shadow: 0 0 12px var(--oa-mint-glow);
}
.oa-guest-equalizer i:nth-child(1) { height: 29px; }
.oa-guest-equalizer i:nth-child(2) { height: 58px; }
.oa-guest-equalizer i:nth-child(3) { height: 42px; }
.oa-guest-equalizer i:nth-child(4) { height: 68px; }
.oa-guest-equalizer i:nth-child(5) { height: 35px; }
.oa-guest-tags {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 28px;
}
.oa-guest-tags span {
padding: 6px 9px;
border-radius: 999px;
background: rgba(255,255,255,.12);
color: rgba(255,255,255,.82);
font-size: 9px;
text-transform: uppercase;
letter-spacing: 1px;
}
.oa-guest-caption {
position: relative;
z-index: 2;
margin-top: 15px;
padding: 11px;
border-radius: 16px;
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.75);
text-align: center;
text-transform: uppercase;
letter-spacing: 1.4px;
font-size: 9px;
}
/*
ПРАВОЕ ИНФОРМАТИВНОЕ ОКНО.
ЗДЕСЬ МЕНЯЕТСЯ ФОН, ОТСТУПЫ, СКРУГЛЕНИЕ И ОБЩАЯ ВЫСОТА ПРАВОГО БЛОКА.
*/
.oa-guest-panel {
min-width: 0;
min-height: 100%;
padding: 18px;
border-radius: 30px;
background:
radial-gradient(circle at 92% 8%, var(--oa-blue-glow), transparent 34%),
rgba(255,255,255,.68);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.7),
0 12px 25px rgba(0,0,0,.08);
}
.oa-guest-info {
padding: 18px;
border-radius: 24px;
background:
radial-gradient(circle at 92% 10%, var(--oa-pink-soft), transparent 34%),
var(--oa-light);
box-shadow: 0 12px 25px rgba(0,0,0,.07);
margin-bottom: 16px;
}
.oa-guest-info h3 {
margin: 0 0 10px;
font-size: 25px;
line-height: 1;
text-transform: lowercase;
}
.oa-guest-info p {
margin: 0 0 9px;
color: var(--oa-copy);
line-height: 1.5;
font-size: 13px;
}
.oa-guest-info p:last-child {
margin-bottom: 0;
}
/*
ПРАВАЯ НИЖНЯЯ ЧАСТЬ.
СТРУКТУРА: BOYS/GIRLS ГОРИЗОНТАЛЬНО, ГЕНЕРАТОР КОДА СНИЗУ.
*/
.oa-guest-main {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.oa-guest-lists {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
/*
ОКНА BOYS / GIRLS.
ЗДЕСЬ МЕНЯЕТСЯ ВЫСОТА, ФОН, СКРУГЛЕНИЕ, ШРИФТЫ И ВНУТРЕННИЕ ОТСТУПЫ СПИСКОВ.
*/
.oa-claim-box {
position: relative;
min-height: 225px;
border-radius: 24px;
background: var(--oa-light);
box-shadow: 0 12px 25px rgba(0,0,0,.08);
padding: 30px 14px 14px;
}
.oa-claim-box h4 {
position: absolute;
top: -9px;
left: 22px;
right: 22px;
margin: 0;
padding: 6px 10px;
border-radius: 12px;
background: linear-gradient(135deg, var(--oa-dark), var(--oa-darker));
color: var(--oa-white);
text-align: center;
font-size: 12px;
text-transform: lowercase;
letter-spacing: 1px;
}
.oa-claim-text {
font-family: monospace;
font-size: 11px;
line-height: 1.35;
color: var(--oa-text);
white-space: normal;
}
/*
ГЕНЕРАТОР КОДА.
ЗДЕСЬ МЕНЯЕТСЯ ФОН, РАСПОЛОЖЕНИЕ ПОЛЕЙ, КНОПКИ И ТЕКСТ СТАТУСА.
*/
.oa-guest-form {
position: relative;
padding: 15px;
border-radius: 24px;
background:
radial-gradient(circle at 92% 10%, var(--oa-pink-glow), transparent 34%),
var(--oa-light);
box-shadow: 0 12px 25px rgba(0,0,0,.07);
}
.oa-guest-form-title {
display: flex;
justify-content: space-between;
gap: 12px;
align-items: center;
margin-bottom: 12px;
}
.oa-guest-form-title b {
display: block;
font-size: 18px;
line-height: 1;
text-transform: lowercase;
}
.oa-guest-form-title span {
display: block;
color: var(--oa-muted);
font-size: 11px;
line-height: 1.25;
text-align: right;
}
.oa-guest-fields {
display: grid;
grid-template-columns: 1fr 1fr 1.25fr;
gap: 9px;
margin-bottom: 10px;
}
/*
ПОЛЯ ЗАПОЛНЕНИЯ В ГЕНЕРАТОРЕ.
ЗДЕСЬ МЕНЯЕТСЯ ЗАЛИВКА, ОБВОДКА, ТЕНЬ, РАЗМЕР ШРИФТА И ОТСТУПЫ ПОЛЕЙ.
*/
.oa-guest-form input {
width: 100%;
border: 1px solid rgba(47,47,49,.22);
outline: 0;
border-radius: 999px;
background:
linear-gradient(135deg, rgba(255,255,255,.95), rgba(244,241,234,.92));
color: var(--oa-text);
font-family: var(--oa-global-font, Trebuchet MS, Arial, sans-serif);
font-size: 12px;
padding: 11px 13px;
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.75),
0 5px 12px rgba(0,0,0,.05);
transition: .22s;
}
.oa-guest-form input::placeholder {
color: rgba(34,34,34,.45);
}
.oa-guest-form input:focus {
border-color: var(--oa-hot-pink);
background: var(--oa-white);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.9),
0 0 0 3px var(--oa-pink-soft),
0 8px 16px rgba(0,0,0,.07);
}
.oa-guest-buttons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 9px;
margin-bottom: 10px;
}
.oa-guest-buttons button {
border: 0;
border-radius: 999px;
background: linear-gradient(135deg, var(--oa-dark), var(--oa-darker));
color: var(--oa-white);
font-size: 10px;
text-transform: uppercase;
letter-spacing: .6px;
padding: 10px 8px;
cursor: pointer;
font-family: var(--oa-global-font, Trebuchet MS, Arial, sans-serif);
}
.oa-guest-buttons button:hover {
background: linear-gradient(135deg, var(--oa-red), var(--oa-hot-pink));
}
.oa-guest-status {
padding: 9px 12px;
border-radius: 16px;
background: var(--oa-soft);
color: var(--oa-muted);
font-size: 10px;
line-height: 1.35;
text-align: center;
}
/*
ВСПЛЫВАЮЩЕЕ УВЕДОМЛЕНИЕ ГЕНЕРАТОРА.
ЗДЕСЬ МЕНЯЕТСЯ ВИД СООБЩЕНИЯ "КОД СКОПИРОВАН" / "ЗАПОЛНИТЕ ПОЛЯ".
*/
.oa-guest .notification {
position: fixed;
left: 50%;
bottom: 28px;
z-index: 99999;
transform: translateX(-50%) translateY(18px);
padding: 12px 18px;
border-radius: 999px;
background: linear-gradient(135deg, var(--oa-dark), var(--oa-darker));
color: var(--oa-white);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1.2px;
box-shadow: 0 12px 28px rgba(0,0,0,.25);
opacity: 0;
pointer-events: none;
transition: .25s;
}
.oa-guest .notification.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/*
СКРЫТОЕ ПОЛЕ ДЛЯ КОПИРОВАНИЯ.
ВАЖНО: POSITION FIXED НУЖЕН, ЧТОБЫ НА ТЕЛЕФОНЕ НЕ КИДАЛО ВВЕРХ ПРИ КОПИРОВАНИИ.
*/
#hiddenTextarea {
position: fixed;
left: 0;
top: 0;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
z-index: -1;
}
/*
АДАПТИВ.
ЗДЕСЬ МЕНЯЕТСЯ ОТОБРАЖЕНИЕ НА ПЛАНШЕТАХ И ТЕЛЕФОНАХ.
*/
@media (max-width: 820px) {
.oa-guest-body {
display: block;
}
.oa-guest-machine {
margin-bottom: 18px;
}
.oa-guest-display {
min-height: 260px;
}
.oa-guest-main {
grid-template-columns: 1fr;
}
.oa-guest-fields {
grid-template-columns: 1fr;
}
}
@media (max-width: 620px) {
.oa-guest {
max-width: calc(100vw - 12px);
margin: 16px auto;
}
.oa-guest-card {
padding: 18px;
border-radius: 26px;
}
.oa-guest-top {
display: block;
}
.oa-guest-top h2 {
font-size: 31px;
}
.oa-guest-top em {
font-size: 10px;
line-height: 1.45;
}
.oa-guest-badge {
width: 100%;
min-width: 0;
margin-top: 15px;
text-align: left;
}
.oa-guest-lists {
grid-template-columns: 1fr;
}
.oa-claim-box {
min-height: 190px;
}
.oa-guest-buttons {
grid-template-columns: 1fr;
}
.oa-guest-form-title {
display: block;
}
.oa-guest-form-title span {
margin-top: 5px;
text-align: left;
}
.oa-guest-info,
.oa-guest-panel,
.oa-guest-form {
padding: 15px;
}
}
@media (max-width: 420px) {
.oa-guest-card {
padding: 14px;
border-radius: 22px;
}
.oa-guest-top h2 {
font-size: 28px;
}
.oa-guest-title b {
font-size: 25px;
}
}
</style>
<script>
document.getElementById('copyButton').addEventListener('click', function(event) {
event.preventDefault();
var type = document.getElementById('type').value.trim();
var name = document.getElementById('name').value.trim();
var link = document.getElementById('link').value.trim();
var resultElement = document.getElementById('result');
if (!type || !name || !link) {
resultElement.textContent = 'Пожалуйста, заполните все поля!';
resultElement.classList.add('show');
setTimeout(function() {
resultElement.classList.remove('show');
}, 2000);
return false;
}
var code = '[' + type + '] - <a href="' + link + '">' + name + '</a><br>';
copyToClipboard(code, resultElement);
return false;
});
document.getElementById('copyWithoutLinkButton').addEventListener('click', function(event) {
event.preventDefault();
var type = document.getElementById('type').value.trim();
var name = document.getElementById('name').value.trim();
var resultElement = document.getElementById('result');
if (!type || !name) {
resultElement.textContent = 'Пожалуйста, заполните тип и имя!';
resultElement.classList.add('show');
setTimeout(function() {
resultElement.classList.remove('show');
}, 2000);
return false;
}
var code = '[' + type + '] - ' + name + '<br>';
copyToClipboard(code, resultElement);
return false;
});
function copyToClipboard(code, resultElement) {
var scrollX = window.pageXOffset || document.documentElement.scrollLeft;
var scrollY = window.pageYOffset || document.documentElement.scrollTop;
var textarea = document.getElementById('hiddenTextarea');
textarea.value = code;
try {
textarea.focus({ preventScroll: true });
} catch(e) {
textarea.focus();
}
textarea.select();
textarea.setSelectionRange(0, textarea.value.length);
try {
var successful = document.execCommand('copy');
if (successful) {
showGuestNotice(resultElement, '✓ код скопирован');
} else {
showGuestNotice(resultElement, 'Ошибка копирования');
}
} catch (err) {
showGuestNotice(resultElement, 'Ошибка копирования');
}
setTimeout(function() {
window.scrollTo(scrollX, scrollY);
}, 0);
if (navigator.clipboard) {
navigator.clipboard.writeText(code).catch(function(err) {
console.error('Clipboard API error:', err);
});
}
}
function showGuestNotice(resultElement, text) {
resultElement.textContent = text;
resultElement.classList.add('show');
setTimeout(function() {
resultElement.classList.remove('show');
}, 2000);
}
</script>
[/html]
[/hideprofile]
Поделиться92026-06-25 19:15:54
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
[hideprofile][html]
<div class="oa-faces">
<div class="oa-faces-card">
<!--
ШАПКА ЗАНЯТЫХ ВНЕШНОСТЕЙ.
ЗДЕСЬ МЕНЯЕМ: МАЛЕНЬКУЮ ПОДПИСЬ, БОЛЬШОЙ ЗАГОЛОВОК И ПОДЗАГОЛОВОК.
-->
<div class="oa-faces-top">
<div>
<span>ON:AIR FACE CLAIM</span>
<h2>занятые внешности</h2>
<em>актуальный список занятых фейсов</em>
</div>
<!--
ПРАВЫЙ БЛОК В ШАПКЕ.
ЗДЕСЬ МЕНЯЕМ: ЗНАЧОК ✦ И КОРОТКУЮ ПОДПИСЬ.
-->
<div class="oa-faces-badge">
<b>✦</b>
<span>ctrl + f для поиска</span>
</div>
</div>
<div class="oa-faces-body">
<!--
ЛЕВЫЙ ЧЁРНЫЙ ON AIR-БЛОК.
ЗДЕСЬ МЕНЯЕМ: FACE ON AIR, FACE CLAIM, ЗАНЯТЫЕ, ФРАЗУ ПОД НАЗВАНИЕМ И МИНИ-ТЕГИ.
-->
<div class="oa-faces-machine">
<div class="oa-faces-display">
<div class="oa-faces-live">
<i></i>
<b>FACE ON AIR</b>
</div>
<div class="oa-faces-title">
<span>face claim</span>
<b>занятые</b>
<em>проверяй фейс до подачи анкеты</em>
</div>
<div class="oa-faces-equalizer">
<i></i><i></i><i></i><i></i><i></i>
</div>
<!--
МИНИ-ТЕГИ.
ЛУЧШЕ ПИСАТЬ КОРОТКО: BOYS, GIRLS, CLAIM, SEARCH.
-->
<div class="oa-faces-tags">
<span>boys</span>
<span>girls</span>
<span>claim</span>
<span>search</span>
</div>
<div class="oa-faces-caption">
occupied appearance list
</div>
</div>
</div>
<!--
ПРАВОЕ ОСНОВНОЕ ОКНО.
СТРУКТУРА: ОПИСАНИЕ → BOYS/GIRLS.
-->
<div class="oa-faces-panel">
<!--
ОПИСАНИЕ ТЕМЫ.
ЗДЕСЬ МЕНЯЕМ ПРАВИЛА, ПОЯСНЕНИЯ И СРОКИ.
-->
<div class="oa-faces-info">
<h3>как пользоваться списком?</h3>
<p>
Внешность считается занятой после принятия анкеты. Перед регистрацией проверьте список через поиск по странице:
<b>ctrl + f</b>.
</p>
<p>
О возможном освобождении желаемой внешности можно узнать в гостевой или в списках на удаление.
Список придержанных и выкупленных внешностей находится в гостевой.
</p>
</div>
<div class="oa-faces-main">
<!--
БЛОК BOYS.
СЮДА АДМИНЫ ВНОСЯТ ЗАНЯТЫЕ МУЖСКИЕ ВНЕШНОСТИ.
ЧТОБЫ ДОБАВИТЬ НОВУЮ БУКВЕННУЮ СЕКЦИЮ — СКОПИРОВАТЬ .oa-face-section.
-->
<div class="oa-face-column oa-face-boys">
<div class="oa-face-title">boys</div>
<div class="oa-face-scroll">
<div class="oa-face-section">
<div class="oa-face-letter">A — B — C — D</div>
<div class="oa-face-list">
<b>actor</b> - Lee Minho<br>
<b>actor</b> - Kim Woobin
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">E — F — G — H</div>
<div class="oa-face-list">
<b>EXO</b> - Park Chanyeol
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">I — J — K — L</div>
<div class="oa-face-list">
...
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">M — N — O — P</div>
<div class="oa-face-list">
...
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">Q — R — S — T</div>
<div class="oa-face-list">
...
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">U — V — W — X — Y — Z</div>
<div class="oa-face-list">
...
</div>
</div>
</div>
</div>
<!--
БЛОК GIRLS.
СЮДА АДМИНЫ ВНОСЯТ ЗАНЯТЫЕ ЖЕНСКИЕ ВНЕШНОСТИ.
ЧТОБЫ ДОБАВИТЬ НОВУЮ БУКВЕННУЮ СЕКЦИЮ — СКОПИРОВАТЬ .oa-face-section.
-->
<div class="oa-face-column oa-face-girls">
<div class="oa-face-title">girls</div>
<div class="oa-face-scroll">
<div class="oa-face-section">
<div class="oa-face-letter">A — B — C — D</div>
<div class="oa-face-list">
<b>actress</b> - Lee Bona<br>
<b>actress</b> - Park Sinhyo
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">E — F — G — H</div>
<div class="oa-face-list">
<b>EVERGLOW</b> - chto-to tam
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">I — J — K — L</div>
<div class="oa-face-list">
...
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">M — N — O — P</div>
<div class="oa-face-list">
...
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">Q — R — S — T</div>
<div class="oa-face-list">
...
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">U — V — W — X — Y — Z</div>
<div class="oa-face-list">
...
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/*
ОБЩАЯ КАРТА ЦВЕТОВ ON:AIR.
ЕСЛИ У ВАС ЭТА КАРТА УЖЕ ЕСТЬ В ОБЩЕМ CSS ФОРУМА, ЭТОТ БЛОК МОЖНО НЕ ДУБЛИРОВАТЬ.
МЕНЯЕМ ЦВЕТА ТУТ — И ВСЕ БЛОКИ, КОТОРЫЕ ПОДВЯЗАНЫ К --OA-GLOBAL-..., МЕНЯЮТСЯ ВМЕСТЕ.
*/
:root {
--oa-global-pink: #ffb4dc;
--oa-global-hot-pink: #ff3cac;
--oa-global-red: #ff6b6b;
--oa-global-blue: #78dcff;
--oa-global-mint: #8ff5ec;
--oa-global-pink-soft: rgba(255,180,220,.28);
--oa-global-pink-glow: rgba(255,180,220,.17);
--oa-global-blue-soft: rgba(120,220,255,.22);
--oa-global-blue-glow: rgba(120,220,255,.18);
--oa-global-mint-glow: rgba(143,245,236,.35);
--oa-global-dark: #2f2f31;
--oa-global-darker: #19191b;
--oa-global-soft: rgba(244,241,234,.95);
--oa-global-light: rgba(255,255,255,.86);
--oa-global-glass: rgba(255,255,255,.72);
--oa-global-text: #222;
--oa-global-copy: #666;
--oa-global-muted: #777;
--oa-global-overline: #999;
--oa-global-white: #fff;
--oa-global-border: rgba(30,30,30,.9);
--oa-global-shadow: rgba(0,0,0,.15);
--oa-global-font: Trebuchet MS, Arial, sans-serif;
}
/*
ПОДВЯЗКА ЗАНЯТЫХ ВНЕШНОСТЕЙ К ОБЩЕЙ КАРТЕ ЦВЕТОВ.
ЗДЕСЬ НЕ СТАВИМ ОТДЕЛЬНЫЕ ЦВЕТА, А БЕРЁМ ИХ ИЗ :ROOT.
*/
.oa-faces {
--oa-pink: var(--oa-global-pink, #ffb4dc);
--oa-hot-pink: var(--oa-global-hot-pink, #ff3cac);
--oa-red: var(--oa-global-red, #ff6b6b);
--oa-blue: var(--oa-global-blue, #78dcff);
--oa-mint: var(--oa-global-mint, #8ff5ec);
--oa-pink-soft: var(--oa-global-pink-soft, rgba(255,180,220,.28));
--oa-pink-glow: var(--oa-global-pink-glow, rgba(255,180,220,.17));
--oa-blue-soft: var(--oa-global-blue-soft, rgba(120,220,255,.22));
--oa-blue-glow: var(--oa-global-blue-glow, rgba(120,220,255,.18));
--oa-mint-glow: var(--oa-global-mint-glow, rgba(143,245,236,.35));
--oa-dark: var(--oa-global-dark, #2f2f31);
--oa-darker: var(--oa-global-darker, #19191b);
--oa-soft: var(--oa-global-soft, rgba(244,241,234,.95));
--oa-light: var(--oa-global-light, rgba(255,255,255,.86));
--oa-glass: var(--oa-global-glass, rgba(255,255,255,.72));
--oa-text: var(--oa-global-text, #222);
--oa-copy: var(--oa-global-copy, #666);
--oa-muted: var(--oa-global-muted, #777);
--oa-overline: var(--oa-global-overline, #999);
--oa-white: var(--oa-global-white, #fff);
--oa-border: var(--oa-global-border, rgba(30,30,30,.9));
--oa-shadow: var(--oa-global-shadow, rgba(0,0,0,.15));
width: min(900px, 100%);
max-width: calc(100vw - 20px);
margin: 30px auto;
font-family: var(--oa-global-font, Trebuchet MS, Arial, sans-serif);
color: var(--oa-text);
}
.oa-faces,
.oa-faces *,
.oa-faces *:before,
.oa-faces *:after {
box-sizing: border-box;
}
.oa-faces-card {
padding: 26px;
border-radius: 36px;
background:
radial-gradient(circle at 10% 0%, var(--oa-blue-soft), transparent 32%),
radial-gradient(circle at 90% 8%, var(--oa-pink-soft), transparent 34%),
linear-gradient(135deg, var(--oa-white), #fbfaf7);
box-shadow: 0 18px 45px var(--oa-shadow);
border: 2px solid var(--oa-border);
}
/*
ШАПКА.
ЗДЕСЬ МЕНЯЮТСЯ РАЗМЕРЫ, ШРИФТЫ И ОТСТУПЫ ВЕРХНЕЙ ЧАСТИ.
*/
.oa-faces-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 22px;
}
.oa-faces-top span {
display: block;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--oa-overline);
}
.oa-faces-top h2 {
margin: 4px 0 4px;
font-size: 38px;
line-height: 1;
font-family: Georgia, serif;
font-style: italic;
font-weight: normal;
text-transform: lowercase;
}
.oa-faces-top em {
font-style: normal;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--oa-muted);
}
.oa-faces-badge {
min-width: 160px;
padding: 13px 16px;
border-radius: 22px;
background: var(--oa-glass);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
text-align: right;
}
.oa-faces-badge b {
display: block;
font-size: 28px;
line-height: 1;
color: var(--oa-hot-pink);
}
.oa-faces-badge span {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--oa-muted);
}
/*
ОБЩАЯ СЕТКА.
205PX — ШИРИНА ЧЁРНОГО БЛОКА СЛЕВА.
МОЖНО СДЕЛАТЬ ЕЩЁ УЖЕ: 190PX.
*/
.oa-faces-body {
display: grid;
grid-template-columns: 205px 1fr;
gap: 22px;
align-items: stretch;
}
/*
ЛЕВЫЙ ЧЁРНЫЙ БЛОК.
ТУТ МЕНЯЮТСЯ РАЗМЕРЫ, ФОН, ОТСТУПЫ И СКРУГЛЕНИЯ ON AIR-БЛОКА.
*/
.oa-faces-machine {
border-radius: 26px;
padding: 13px;
background:
linear-gradient(180deg, var(--oa-dark), var(--oa-darker));
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.12),
0 16px 30px rgba(0,0,0,.18);
}
.oa-faces-display {
position: relative;
min-height: 500px;
height: 100%;
border-radius: 22px;
overflow: hidden;
padding: 16px;
background:
radial-gradient(circle at 80% 10%, var(--oa-pink-glow), transparent 35%),
radial-gradient(circle at 15% 85%, var(--oa-blue-glow), transparent 34%),
linear-gradient(135deg, rgba(255,255,255,.16), rgba(120,220,255,.06));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.oa-faces-display:after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.16) 45%, transparent 58%);
pointer-events: none;
}
.oa-faces-live {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(0,0,0,.28);
color: var(--oa-white);
font-size: 10px;
letter-spacing: 1.5px;
}
.oa-faces-live i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--oa-hot-pink);
box-shadow: 0 0 12px rgba(255,60,172,.75);
}
.oa-faces-title {
position: relative;
z-index: 2;
margin-top: 24px;
color: var(--oa-white);
}
.oa-faces-title span {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 2.5px;
color: rgba(255,255,255,.62);
}
.oa-faces-title b {
display: block;
margin-top: 8px;
font-size: 26px;
line-height: 1.05;
font-family: var(--oa-global-font, Trebuchet MS, Arial, sans-serif);
font-weight: bold;
text-transform: lowercase;
letter-spacing: -.5px;
}
.oa-faces-title em {
display: block;
margin-top: 12px;
padding: 10px 11px;
border-radius: 16px;
background: rgba(255,255,255,.10);
font-style: normal;
font-size: 11px;
line-height: 1.35;
color: rgba(255,255,255,.82);
}
.oa-faces-equalizer {
position: relative;
z-index: 2;
height: 64px;
margin-top: 28px;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 7px;
}
.oa-faces-equalizer i {
display: block;
width: 10px;
border-radius: 999px;
background: linear-gradient(180deg, var(--oa-mint), var(--oa-pink));
box-shadow: 0 0 12px var(--oa-mint-glow);
}
.oa-faces-equalizer i:nth-child(1) { height: 25px; }
.oa-faces-equalizer i:nth-child(2) { height: 50px; }
.oa-faces-equalizer i:nth-child(3) { height: 36px; }
.oa-faces-equalizer i:nth-child(4) { height: 58px; }
.oa-faces-equalizer i:nth-child(5) { height: 30px; }
.oa-faces-tags {
position: relative;
z-index: 2;
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 28px;
}
.oa-faces-tags span {
padding: 6px 8px;
border-radius: 999px;
background: rgba(255,255,255,.12);
color: rgba(255,255,255,.82);
font-size: 8px;
text-transform: uppercase;
letter-spacing: .8px;
}
.oa-faces-caption {
position: relative;
z-index: 2;
margin-top: 15px;
padding: 10px;
border-radius: 16px;
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.75);
text-align: center;
text-transform: uppercase;
letter-spacing: 1.2px;
font-size: 8px;
}
/*
ПРАВОЕ ИНФОРМАТИВНОЕ ОКНО.
ЗДЕСЬ МЕНЯЕТСЯ ФОН, ОТСТУПЫ, СКРУГЛЕНИЕ И ОБЩАЯ ВЫСОТА ПРАВОГО БЛОКА.
*/
.oa-faces-panel {
min-width: 0;
min-height: 100%;
padding: 18px;
border-radius: 30px;
background:
radial-gradient(circle at 92% 8%, var(--oa-blue-glow), transparent 34%),
rgba(255,255,255,.68);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.7),
0 12px 25px rgba(0,0,0,.08);
}
.oa-faces-info {
padding: 18px;
border-radius: 24px;
background:
radial-gradient(circle at 92% 10%, var(--oa-pink-soft), transparent 34%),
var(--oa-light);
box-shadow: 0 12px 25px rgba(0,0,0,.07);
margin-bottom: 16px;
}
.oa-faces-info h3 {
margin: 0 0 10px;
font-size: 25px;
line-height: 1;
text-transform: lowercase;
}
.oa-faces-info p {
margin: 0 0 9px;
color: var(--oa-copy);
line-height: 1.5;
font-size: 13px;
}
.oa-faces-info p:last-child {
margin-bottom: 0;
}
/*
СПИСКИ BOYS / GIRLS.
ЗДЕСЬ МЕНЯЕТСЯ ОБЩАЯ СЕТКА ДВУХ КОЛОНОК.
*/
.oa-faces-main {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
/*
КОЛОНКИ BOYS / GIRLS.
ЗДЕСЬ МЕНЯЕТСЯ ФОН, ВЫСОТА, СКРУГЛЕНИЕ И ОТСТУПЫ.
*/
.oa-face-column {
position: relative;
border-radius: 24px;
background: var(--oa-light);
box-shadow: 0 12px 25px rgba(0,0,0,.08);
padding: 30px 14px 14px;
min-height: 360px;
}
.oa-face-title {
position: absolute;
top: -9px;
left: 22px;
right: 22px;
margin: 0;
padding: 6px 10px;
border-radius: 12px;
background: linear-gradient(135deg, var(--oa-dark), var(--oa-darker));
color: var(--oa-white);
text-align: center;
font-size: 12px;
text-transform: lowercase;
letter-spacing: 1px;
}
.oa-face-boys .oa-face-title {
box-shadow: 0 0 14px rgba(120,220,255,.22);
}
.oa-face-girls .oa-face-title {
box-shadow: 0 0 14px rgba(255,60,172,.18);
}
/*
ВНУТРЕННИЙ СКРОЛЛ КОЛОНОК.
HEIGHT — ВЫСОТА ВИДИМОЙ ЧАСТИ СПИСКА.
*/
.oa-face-scroll {
height: 315px;
overflow-y: auto;
padding-right: 7px;
}
.oa-face-scroll::-webkit-scrollbar {
width: 6px;
}
.oa-face-scroll::-webkit-scrollbar-track {
background: rgba(230,225,218,.65);
border-radius: 20px;
}
.oa-face-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--oa-blue), var(--oa-pink));
border-radius: 20px;
}
/*
БУКВЕННЫЕ СЕКЦИИ.
ЗДЕСЬ МЕНЯЕТСЯ ВИД ОДНОГО БЛОКА A-B-C-D И Т.Д.
*/
.oa-face-section {
padding: 11px;
border-radius: 18px;
background: rgba(255,255,255,.70);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.7),
0 8px 16px rgba(0,0,0,.04);
margin-bottom: 12px;
}
.oa-face-section:last-child {
margin-bottom: 0;
}
.oa-face-letter {
padding: 7px 10px;
border-radius: 999px;
background:
linear-gradient(135deg, rgba(255,255,255,.95), rgba(244,241,234,.92));
border: 1px solid rgba(47,47,49,.10);
color: var(--oa-muted);
text-align: center;
font-size: 11px;
letter-spacing: 1.8px;
text-transform: uppercase;
margin-bottom: 9px;
}
.oa-face-list {
text-align: center;
color: var(--oa-text);
font-size: 12px;
line-height: 1.55;
text-transform: lowercase;
}
.oa-face-list b {
color: var(--oa-text);
}
/*
АДАПТИВ.
НА ПЛАНШЕТАХ ЧЁРНЫЙ БЛОК УХОДИТ НАВЕРХ, СПИСКИ ОСТАЮТСЯ НИЖЕ.
*/
@media (max-width: 820px) {
.oa-faces-body {
display: block;
}
.oa-faces-machine {
margin-bottom: 18px;
}
.oa-faces-display {
min-height: 260px;
}
.oa-faces-main {
grid-template-columns: 1fr;
}
.oa-face-scroll {
height: auto;
max-height: 320px;
}
}
/*
АДАПТИВ ТЕЛЕФОНА.
ЗДЕСЬ МЕНЯЕТСЯ РАЗМЕР ШАПКИ, ОТСТУПЫ И СКРУГЛЕНИЯ.
*/
@media (max-width: 620px) {
.oa-faces {
max-width: calc(100vw - 12px);
margin: 16px auto;
}
.oa-faces-card {
padding: 18px;
border-radius: 26px;
}
.oa-faces-top {
display: block;
}
.oa-faces-top h2 {
font-size: 31px;
}
.oa-faces-top em {
font-size: 10px;
line-height: 1.45;
}
.oa-faces-badge {
width: 100%;
min-width: 0;
margin-top: 15px;
text-align: left;
}
.oa-faces-info,
.oa-faces-panel {
padding: 15px;
}
.oa-face-column {
min-height: 0;
}
}
@media (max-width: 420px) {
.oa-faces-card {
padding: 14px;
border-radius: 22px;
}
.oa-faces-top h2 {
font-size: 28px;
}
.oa-faces-title b {
font-size: 25px;
}
.oa-face-letter {
font-size: 10px;
letter-spacing: 1px;
}
.oa-face-list {
font-size: 11px;
}
}
</style>
[/html]
[/hideprofile]
Поделиться102026-06-27 12:21:08
- Администратор
- Сообщений: 89
- Уважение: +0
- Позитив: +0
- Последний визит:
2026-06-27 14:02:37
[hideprofile][html]
<div class="oa-faces">
<div class="oa-faces-card">
<!--
ШАПКА ЗАНЯТЫХ ВНЕШНОСТЕЙ.
ЗДЕСЬ МЕНЯЕМ: МАЛЕНЬКУЮ ПОДПИСЬ, БОЛЬШОЙ ЗАГОЛОВОК И ПОДЗАГОЛОВОК.
-->
<div class="oa-faces-top">
<div>
<span>ON:AIR FACE CLAIM</span>
<h2>занятые внешности</h2>
<em>актуальный список занятых фейсов</em>
</div>
<!--
ПРАВЫЙ БЛОК В ШАПКЕ.
ЗДЕСЬ МЕНЯЕМ: ЗНАЧОК И КОРОТКУЮ ПОДПИСЬ.
-->
<div class="oa-faces-badge">
<b>✦</b>
<span>ctrl + f для поиска</span>
</div>
</div>
<div class="oa-faces-body">
<!--
ЛЕВЫЙ ЧЁРНЫЙ ON AIR-БЛОК.
ЗДЕСЬ МЕНЯЕМ: FACE ON AIR, FACE CLAIM, ЗАНЯТЫЕ, ПРАВИЛА И ПОДПИСИ.
-->
<div class="oa-faces-machine">
<div class="oa-faces-display">
<div class="oa-faces-live">
<i></i>
<b>FACE ON AIR</b>
</div>
<div class="oa-faces-title">
<span>face claim</span>
<b>занятые</b>
</div>
<!--
ПРАВИЛА В ЧЁРНОМ БЛОКЕ.
ЗДЕСЬ МЕНЯЕМ ОПИСАНИЕ, ПРАВИЛА ЗАНЯТЫХ, ПРИДЕРЖАННЫХ И ВЫКУПЛЕННЫХ ВНЕШНОСТЕЙ.
-->
<div class="oa-faces-rules">
<p>
Внешность считается занятой после принятия анкеты. Перед регистрацией проверьте список через поиск по странице:
<b>ctrl + f</b>.
</p>
<p>
О возможном освобождении фейса можно узнать в гостевой или в списках на удаление.
</p>
<p>
Придержанные и выкупленные внешности отмечаются отдельно в гостевой.
</p>
</div>
<div class="oa-faces-equalizer">
<i></i><i></i><i></i><i></i><i></i>
</div>
</div>
</div>
<!--
ПРАВОЕ ОСНОВНОЕ ОКНО.
ТАБЛИЦА BOYS / GIRLS РАСТЯНУТА ПО ВЫСОТЕ ЧЁРНОГО БЛОКА.
-->
<div class="oa-faces-panel">
<div class="oa-faces-main">
<!--
БЛОК BOYS.
СЮДА АДМИНЫ ВНОСЯТ ЗАНЯТЫЕ МУЖСКИЕ ВНЕШНОСТИ.
ВНУТРИ КАЖДОЙ БУКВЕННОЙ КАТЕГОРИИ ЕСТЬ ОТДЕЛЬНЫЙ СКРОЛЛ.
-->
<div class="oa-face-column oa-face-boys">
<div class="oa-face-title">boys</div>
<div class="oa-face-scroll">
<div class="oa-face-section">
<div class="oa-face-letter">A — B — C — D</div>
<div class="oa-face-list">
<b>A.C.E</b> - Lee Donghun<br>
<b>AB6IX</b> - Jeon Woong<br>
<b>ATEEZ</b> - Choi San<br>
<b>ATEEZ</b> - Park Seonghwa<br>
<b>ASTRO</b> - Cha Eunwoo<br>
<b>BTS</b> - Kim Taehyung<br>
<b>BTS</b> - Min Yoongi<br>
<b>CIX</b> - Bae Jinyoung<br>
<b>CRAVITY</b> - Kang Minhee<br>
<b>DKZ</b> - Park Jaechan
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">E — F — G — H</div>
<div class="oa-face-list">
<b>EXO</b> - Byun Baekhyun<br>
<b>EXO</b> - Park Chanyeol<br>
<b>EXO</b> - Oh Sehun<br>
<b>ENHYPEN</b> - Park Sunghoon<br>
<b>ENHYPEN</b> - Lee Heeseung<br>
<b>GOT7</b> - Mark Tuan<br>
<b>GOT7</b> - Jackson Wang<br>
<b>HIGHLIGHT</b> - Yoon Dujun<br>
<b>HIGHLIGHT</b> - Yang Yoseob<br>
<b>actor</b> - Hwang Inyeop
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">I — J — K — L</div>
<div class="oa-face-list">
<b>IKON</b> - Kim Jinhwan<br>
<b>IKON</b> - Song Yunhyeong<br>
<b>JYJ</b> - Kim Jaejoong<br>
<b>actor</b> - Ji Changwook<br>
<b>actor</b> - Jung Haein<br>
<b>actor</b> - Kim Seonho<br>
<b>actor</b> - Kim Woobin<br>
<b>actor</b> - Lee Minho<br>
<b>actor</b> - Lee Dohyun<br>
<b>actor</b> - Lee Jongsuk
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">M — N — O — P</div>
<div class="oa-face-list">
<b>MONSTA X</b> - Yoo Kihyun<br>
<b>MONSTA X</b> - Lee Minhyuk<br>
<b>NCT</b> - Lee Taeyong<br>
<b>NCT</b> - Na Jaemin<br>
<b>NCT</b> - Jung Jaehyun<br>
<b>ONEUS</b> - Lee Seoho<br>
<b>ONEUS</b> - Kim Youngjo<br>
<b>PENTAGON</b> - Jung Wooseok<br>
<b>PENTAGON</b> - Kang Hyunggu<br>
<b>P1Harmony</b> - Choi Taeyang
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">Q — R — S — T</div>
<div class="oa-face-list">
<b>RIIZE</b> - Jung Sungchan<br>
<b>RIIZE</b> - Park Wonbin<br>
<b>SEVENTEEN</b> - Yoon Jeonghan<br>
<b>SEVENTEEN</b> - Kim Mingyu<br>
<b>SEVENTEEN</b> - Wen Junhui<br>
<b>Stray Kids</b> - Hwang Hyunjin<br>
<b>Stray Kids</b> - Lee Felix<br>
<b>TXT</b> - Choi Yeonjun<br>
<b>TXT</b> - Choi Soobin<br>
<b>THE BOYZ</b> - Lee Juyeon
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">U — V — W — X — Y — Z</div>
<div class="oa-face-list">
<b>UP10TION</b> - Kim Wooseok<br>
<b>VICTON</b> - Han Seungwoo<br>
<b>VIXX</b> - Jung Taekwoon<br>
<b>VIXX</b> - Kim Wonshik<br>
<b>WayV</b> - Wong Yukhei<br>
<b>WayV</b> - Xiao Dejun<br>
<b>WEi</b> - Kim Yohan<br>
<b>WINNER</b> - Kang Seungyoon<br>
<b>Xdinary Heroes</b> - Goo Gunil<br>
<b>ZEROBASEONE</b> - Zhang Hao
</div>
</div>
</div>
</div>
<!--
БЛОК GIRLS.
СЮДА АДМИНЫ ВНОСЯТ ЗАНЯТЫЕ ЖЕНСКИЕ ВНЕШНОСТИ.
ВНУТРИ КАЖДОЙ БУКВЕННОЙ КАТЕГОРИИ ЕСТЬ ОТДЕЛЬНЫЙ СКРОЛЛ.
-->
<div class="oa-face-column oa-face-girls">
<div class="oa-face-title">girls</div>
<div class="oa-face-scroll">
<div class="oa-face-section">
<div class="oa-face-letter">A — B — C — D</div>
<div class="oa-face-list">
<b>aespa</b> - Yoo Jimin<br>
<b>aespa</b> - Kim Minjeong<br>
<b>AOA</b> - Kim Seolhyun<br>
<b>Apink</b> - Jung Eunji<br>
<b>BLACKPINK</b> - Kim Jisoo<br>
<b>BLACKPINK</b> - Lalisa Manobal<br>
<b>Billlie</b> - Kim Siyoon<br>
<b>CLC</b> - Choi Yujin<br>
<b>Dreamcatcher</b> - Kim Minji<br>
<b>Dreamcatcher</b> - Lee Siyeon
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">E — F — G — H</div>
<div class="oa-face-list">
<b>EVERGLOW</b> - Wang Yiren<br>
<b>EVERGLOW</b> - Kim Sihyeon<br>
<b>EXID</b> - Ahn Hani<br>
<b>fromis_9</b> - Lee Saerom<br>
<b>fromis_9</b> - Roh Jisun<br>
<b>GFRIEND</b> - Jung Yerin<br>
<b>GFRIEND</b> - Kim Yewon<br>
<b>Girls' Generation</b> - Kim Taeyeon<br>
<b>Girls' Generation</b> - Im Yoona<br>
<b>H1-KEY</b> - Lee Hwiseo
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">I — J — K — L</div>
<div class="oa-face-list">
<b>ITZY</b> - Shin Ryujin<br>
<b>ITZY</b> - Hwang Yeji<br>
<b>IVE</b> - An Yujin<br>
<b>IVE</b> - Jang Wonyoung<br>
<b>Jessica</b> - Jung Sooyeon<br>
<b>Kep1er</b> - Shen Xiaoting<br>
<b>Kep1er</b> - Kim Chaehyun<br>
<b>LE SSERAFIM</b> - Kim Chaewon<br>
<b>LE SSERAFIM</b> - Miyawaki Sakura<br>
<b>LOONA</b> - Jeon Heejin
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">M — N — O — P</div>
<div class="oa-face-list">
<b>MAMAMOO</b> - Moon Byulyi<br>
<b>MAMAMOO</b> - Ahn Hyejin<br>
<b>Miss A</b> - Bae Suzy<br>
<b>NewJeans</b> - Kim Minji<br>
<b>NewJeans</b> - Pham Hanni<br>
<b>NewJeans</b> - Kang Haerin<br>
<b>OH MY GIRL</b> - Choi Hyojung<br>
<b>OH MY GIRL</b> - Yoo Shiah<br>
<b>PURPLE KISS</b> - Na Goeun<br>
<b>PRISTIN</b> - Zhou Jieqiong
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">Q — R — S — T</div>
<div class="oa-face-list">
<b>Red Velvet</b> - Bae Joohyun<br>
<b>Red Velvet</b> - Kang Seulgi<br>
<b>Red Velvet</b> - Park Sooyoung<br>
<b>STAYC</b> - Bae Sumin<br>
<b>STAYC</b> - Yoon Seeun<br>
<b>STAYC</b> - Jang Yeeun<br>
<b>TWICE</b> - Im Nayeon<br>
<b>TWICE</b> - Myoui Mina<br>
<b>TWICE</b> - Hirai Momo<br>
<b>tripleS</b> - Yoon Seoyeon
</div>
</div>
<div class="oa-face-section">
<div class="oa-face-letter">U — V — W — X — Y — Z</div>
<div class="oa-face-list">
<b>VIVIZ</b> - Jung Eunbi<br>
<b>VIVIZ</b> - Hwang Eunbi<br>
<b>WJSN</b> - Kim Jiyeon<br>
<b>WJSN</b> - Bona Kim<br>
<b>Weki Meki</b> - Choi Yoojung<br>
<b>Weeekly</b> - Lee Soojin<br>
<b>woo!ah!</b> - Kwon Nayeon<br>
<b>actress</b> - Won Jina<br>
<b>YENA</b> - Choi Yena<br>
<b>actress</b> - Zhao Lusi
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
/*
ОБЩАЯ КАРТА ЦВЕТОВ ON:AIR.
ЕСЛИ У ВАС ЭТА КАРТА УЖЕ ЕСТЬ В ОБЩЕМ CSS ФОРУМА, ЭТОТ БЛОК МОЖНО НЕ ДУБЛИРОВАТЬ.
МЕНЯЕМ ЦВЕТА ТУТ — И ВСЕ БЛОКИ, КОТОРЫЕ ПОДВЯЗАНЫ К --OA-GLOBAL-..., МЕНЯЮТСЯ ВМЕСТЕ.
*/
:root {
--oa-global-pink: #ffb4dc;
--oa-global-hot-pink: #ff3cac;
--oa-global-red: #ff6b6b;
--oa-global-blue: #78dcff;
--oa-global-mint: #8ff5ec;
--oa-global-pink-soft: rgba(255,180,220,.28);
--oa-global-pink-glow: rgba(255,180,220,.17);
--oa-global-blue-soft: rgba(120,220,255,.22);
--oa-global-blue-glow: rgba(120,220,255,.18);
--oa-global-mint-glow: rgba(143,245,236,.35);
--oa-global-dark: #2f2f31;
--oa-global-darker: #19191b;
--oa-global-soft: rgba(244,241,234,.95);
--oa-global-light: rgba(255,255,255,.86);
--oa-global-glass: rgba(255,255,255,.72);
--oa-global-text: #222;
--oa-global-copy: #666;
--oa-global-muted: #777;
--oa-global-overline: #999;
--oa-global-white: #fff;
--oa-global-border: rgba(30,30,30,.9);
--oa-global-shadow: rgba(0,0,0,.15);
--oa-global-font: Trebuchet MS, Arial, sans-serif;
}
/*
ПОДВЯЗКА ЗАНЯТЫХ ВНЕШНОСТЕЙ К ОБЩЕЙ КАРТЕ ЦВЕТОВ.
--oa-faces-height — ОБЩАЯ ВЫСОТА ЧЁРНОГО БЛОКА И ПРАВОЙ ТАБЛИЦЫ НА ПК.
*/
.oa-faces {
--oa-pink: var(--oa-global-pink, #ffb4dc);
--oa-hot-pink: var(--oa-global-hot-pink, #ff3cac);
--oa-red: var(--oa-global-red, #ff6b6b);
--oa-blue: var(--oa-global-blue, #78dcff);
--oa-mint: var(--oa-global-mint, #8ff5ec);
--oa-pink-soft: var(--oa-global-pink-soft, rgba(255,180,220,.28));
--oa-pink-glow: var(--oa-global-pink-glow, rgba(255,180,220,.17));
--oa-blue-soft: var(--oa-global-blue-soft, rgba(120,220,255,.22));
--oa-blue-glow: var(--oa-global-blue-glow, rgba(120,220,255,.18));
--oa-mint-glow: var(--oa-global-mint-glow, rgba(143,245,236,.35));
--oa-dark: var(--oa-global-dark, #2f2f31);
--oa-darker: var(--oa-global-darker, #19191b);
--oa-soft: var(--oa-global-soft, rgba(244,241,234,.95));
--oa-light: var(--oa-global-light, rgba(255,255,255,.86));
--oa-glass: var(--oa-global-glass, rgba(255,255,255,.72));
--oa-text: var(--oa-global-text, #222);
--oa-copy: var(--oa-global-copy, #666);
--oa-muted: var(--oa-global-muted, #777);
--oa-overline: var(--oa-global-overline, #999);
--oa-white: var(--oa-global-white, #fff);
--oa-border: var(--oa-global-border, rgba(30,30,30,.9));
--oa-shadow: var(--oa-global-shadow, rgba(0,0,0,.15));
--oa-faces-height: 560px;
width: min(900px, 100%);
max-width: calc(100vw - 20px);
margin: 30px auto;
font-family: var(--oa-global-font, Trebuchet MS, Arial, sans-serif);
color: var(--oa-text);
}
.oa-faces,
.oa-faces *,
.oa-faces *:before,
.oa-faces *:after {
box-sizing: border-box;
}
.oa-faces-card {
padding: 26px;
border-radius: 36px;
background:
radial-gradient(circle at 10% 0%, var(--oa-blue-soft), transparent 32%),
radial-gradient(circle at 90% 8%, var(--oa-pink-soft), transparent 34%),
linear-gradient(135deg, var(--oa-white), #fbfaf7);
box-shadow: 0 18px 45px var(--oa-shadow);
border: 2px solid var(--oa-border);
}
/*
ШАПКА.
ЗДЕСЬ МЕНЯЮТСЯ РАЗМЕРЫ, ШРИФТЫ И ОТСТУПЫ ВЕРХНЕЙ ЧАСТИ.
*/
.oa-faces-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
margin-bottom: 22px;
}
.oa-faces-top span {
display: block;
font-size: 11px;
letter-spacing: 4px;
text-transform: uppercase;
color: var(--oa-overline);
}
.oa-faces-top h2 {
margin: 4px 0 4px;
font-size: 38px;
line-height: 1;
font-family: Georgia, serif;
font-style: italic;
font-weight: normal;
text-transform: lowercase;
}
.oa-faces-top em {
font-style: normal;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--oa-muted);
}
.oa-faces-badge {
min-width: 160px;
padding: 13px 16px;
border-radius: 22px;
background: var(--oa-glass);
box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
text-align: right;
}
.oa-faces-badge b {
display: block;
font-size: 28px;
line-height: 1;
color: var(--oa-hot-pink);
}
.oa-faces-badge span {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--oa-muted);
}
/*
ОБЩАЯ СЕТКА.
235PX — ШИРИНА ЧЁРНОГО БЛОКА СЛЕВА. МОЖНО СДЕЛАТЬ УЖЕ: 215PX. ШИРЕ: 255PX.
*/
.oa-faces-body {
display: grid;
grid-template-columns: 235px 1fr;
gap: 22px;
height: var(--oa-faces-height);
align-items: stretch;
overflow: hidden;
}
.oa-faces-machine,
.oa-faces-panel,
.oa-faces-main,
.oa-face-column {
min-height: 0;
}
/*
ЛЕВЫЙ ЧЁРНЫЙ БЛОК.
ТУТ МЕНЯЮТСЯ РАЗМЕРЫ, ФОН, ОТСТУПЫ И СКРУГЛЕНИЯ ON AIR-БЛОКА.
*/
.oa-faces-machine {
height: 100%;
border-radius: 28px;
padding: 14px;
background:
linear-gradient(180deg, var(--oa-dark), var(--oa-darker));
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.12),
0 16px 30px rgba(0,0,0,.18);
}
.oa-faces-display {
position: relative;
height: 100%;
border-radius: 23px;
overflow: hidden;
padding: 16px;
background:
radial-gradient(circle at 80% 10%, var(--oa-pink-glow), transparent 35%),
radial-gradient(circle at 15% 85%, var(--oa-blue-glow), transparent 34%),
linear-gradient(135deg, rgba(255,255,255,.16), rgba(120,220,255,.06));
box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}
.oa-faces-display:after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.16) 45%, transparent 58%);
pointer-events: none;
}
.oa-faces-live {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 999px;
background: rgba(0,0,0,.28);
color: var(--oa-white);
font-size: 10px;
letter-spacing: 1.5px;
}
.oa-faces-live i {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--oa-hot-pink);
box-shadow: 0 0 12px rgba(255,60,172,.75);
}
.oa-faces-title {
position: relative;
z-index: 2;
margin-top: 22px;
color: var(--oa-white);
}
.oa-faces-title span {
display: block;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 2.5px;
color: rgba(255,255,255,.62);
}
.oa-faces-title b {
display: block;
margin-top: 8px;
font-size: 28px;
line-height: 1.05;
font-family: var(--oa-global-font, Trebuchet MS, Arial, sans-serif);
font-weight: bold;
text-transform: lowercase;
letter-spacing: -.5px;
}
/*
ПРАВИЛА В ЧЁРНОМ БЛОКЕ.
ТУТ МЕНЯЕТСЯ ТЕКСТ, РАЗМЕР ШРИФТА, ОТСТУПЫ И ФОН ПРАВИЛ.
*/
.oa-faces-rules {
position: relative;
z-index: 2;
margin-top: 16px;
padding: 13px;
border-radius: 17px;
background: rgba(255,255,255,.10);
color: rgba(255,255,255,.80);
}
.oa-faces-rules p {
margin: 0 0 8px;
font-size: 11px;
line-height: 1.38;
}
.oa-faces-rules p:last-child {
margin-bottom: 0;
}
.oa-faces-rules b {
color: var(--oa-mint);
}
.oa-faces-equalizer {
position: relative;
z-index: 2;
height: 64px;
margin-top: 24px;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 7px;
}
.oa-faces-equalizer i {
display: block;
width: 10px;
border-radius: 999px;
background: linear-gradient(180deg, var(--oa-mint), var(--oa-pink));
box-shadow: 0 0 12px var(--oa-mint-glow);
}
.oa-faces-equalizer i:nth-child(1) { height: 25px; }
.oa-faces-equalizer i:nth-child(2) { height: 50px; }
.oa-faces-equalizer i:nth-child(3) { height: 36px; }
.oa-faces-equalizer i:nth-child(4) { height: 58px; }
.oa-faces-equalizer i:nth-child(5) { height: 30px; }
/*
ПРАВОЕ ИНФОРМАТИВНОЕ ОКНО.
ВЫСОТА РАВНА ЧЁРНОМУ БЛОКУ ЗА СЧЁТ HEIGHT: 100%.
*/
.oa-faces-panel {
min-width: 0;
height: 100%;
min-height: 0;
overflow: hidden;
padding: 18px;
border-radius: 30px;
background:
radial-gradient(circle at 92% 8%, var(--oa-blue-glow), transparent 34%),
rgba(255,255,255,.68);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.7),
0 12px 25px rgba(0,0,0,.08);
}
/*
СПИСКИ BOYS / GIRLS.
ЗДЕСЬ МЕНЯЕТСЯ ОБЩАЯ СЕТКА ДВУХ КОЛОНОК.
*/
.oa-faces-main {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
height: 100%;
min-height: 0;
}
/*
КОЛОНКИ BOYS / GIRLS.
ВАЖНО: OVERFLOW: VISIBLE НУЖЕН, ЧТОБЫ ПЛАШКИ BOYS / GIRLS НЕ ОБРЕЗАЛИСЬ СВЕРХУ.
*/
.oa-face-column {
position: relative;
height: 100%;
min-height: 0;
overflow: visible;
border-radius: 24px;
background: var(--oa-light);
box-shadow: 0 12px 25px rgba(0,0,0,.08);
padding: 30px 14px 14px;
}
.oa-face-title {
position: absolute;
top: -9px;
left: 22px;
right: 22px;
margin: 0;
padding: 6px 10px;
border-radius: 12px;
background: linear-gradient(135deg, var(--oa-dark), var(--oa-darker));
color: var(--oa-white);
text-align: center;
font-size: 12px;
text-transform: lowercase;
letter-spacing: 1px;
}
.oa-face-boys .oa-face-title {
box-shadow: 0 0 14px rgba(120,220,255,.22);
}
.oa-face-girls .oa-face-title {
box-shadow: 0 0 14px rgba(255,60,172,.18);
}
/*
ВНУТРЕННИЙ СКРОЛЛ ВСЕЙ КОЛОНКИ BOYS / GIRLS.
*/
.oa-face-scroll {
height: 100%;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
padding-right: 7px;
}
.oa-face-scroll::-webkit-scrollbar {
width: 6px;
}
.oa-face-scroll::-webkit-scrollbar-track {
background: rgba(230,225,218,.65);
border-radius: 20px;
}
.oa-face-scroll::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--oa-blue), var(--oa-pink));
border-radius: 20px;
}
/*
БУКВЕННЫЕ СЕКЦИИ.
ЗДЕСЬ МЕНЯЕТСЯ ВИД ОДНОГО БЛОКА A-B-C-D И Т.Д.
*/
.oa-face-section {
padding: 11px;
border-radius: 18px;
background: rgba(255,255,255,.70);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.7),
0 8px 16px rgba(0,0,0,.04);
margin-bottom: 12px;
}
.oa-face-section:last-child {
margin-bottom: 0;
}
.oa-face-letter {
padding: 7px 10px;
border-radius: 999px;
background:
linear-gradient(135deg, rgba(255,255,255,.95), rgba(244,241,234,.92));
border: 1px solid rgba(47,47,49,.10);
color: var(--oa-muted);
text-align: center;
font-size: 11px;
letter-spacing: 1.8px;
text-transform: uppercase;
margin-bottom: 9px;
}
.oa-face-list {
text-align: center;
color: var(--oa-text);
font-size: 12px;
line-height: 1.55;
text-transform: lowercase;
/*
СКРОЛЛ ВНУТРИ КАЖДОЙ БУКВЕННОЙ КАТЕГОРИИ.
ЕСЛИ В A-B-C-D ИЛИ M-N-O-P БУДЕТ БОЛЬШЕ 20 ПОЗИЦИЙ, БЛОК НЕ РАЗНЕСЁТ ВЁРСТКУ.
*/
max-height: 120px;
overflow-y: auto;
padding-right: 5px;
}
.oa-face-list b {
color: var(--oa-text);
}
.oa-face-list::-webkit-scrollbar {
width: 5px;
}
.oa-face-list::-webkit-scrollbar-track {
background: rgba(230,225,218,.65);
border-radius: 20px;
}
.oa-face-list::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--oa-blue), var(--oa-pink));
border-radius: 20px;
}
/*
АДАПТИВ.
НА ПЛАНШЕТАХ ЧЁРНЫЙ БЛОК УХОДИТ НАВЕРХ, СПИСКИ ОСТАЮТСЯ НИЖЕ.
*/
@media (max-width: 820px) {
.oa-faces-body {
display: block;
height: auto;
overflow: visible;
}
.oa-faces-machine {
height: auto;
margin-bottom: 18px;
}
.oa-faces-display {
min-height: 360px;
height: auto;
}
.oa-faces-panel {
height: auto;
overflow: visible;
}
.oa-faces-main {
grid-template-columns: 1fr;
height: auto;
}
.oa-face-column {
height: auto;
}
.oa-face-scroll {
height: auto;
max-height: 320px;
}
}
/*
АДАПТИВ ТЕЛЕФОНА.
ЗДЕСЬ МЕНЯЕТСЯ РАЗМЕР ШАПКИ, ОТСТУПЫ И СКРУГЛЕНИЯ.
*/
@media (max-width: 620px) {
.oa-faces {
max-width: calc(100vw - 12px);
margin: 16px auto;
}
.oa-faces-card {
padding: 18px;
border-radius: 26px;
}
.oa-faces-top {
display: block;
}
.oa-faces-top h2 {
font-size: 31px;
}
.oa-faces-top em {
font-size: 10px;
line-height: 1.45;
}
.oa-faces-badge {
width: 100%;
min-width: 0;
margin-top: 15px;
text-align: left;
}
.oa-faces-panel {
padding: 15px;
}
.oa-face-column {
min-height: 0;
}
}
@media (max-width: 420px) {
.oa-faces-card {
padding: 14px;
border-radius: 22px;
}
.oa-faces-top h2 {
font-size: 28px;
}
.oa-faces-title b {
font-size: 25px;
}
.oa-face-letter {
font-size: 10px;
letter-spacing: 1px;
}
.oa-face-list {
font-size: 11px;
}
}
</style>
[/html]
[/hideprofile]
Страница: 1