Хранилище ценных знаний

Поделиться12025-06-28 14:14:48

Автор: Paradox
Пришёл, увидел, закурил
Сообщений: 124

Место склада различных советов и уроков, которые я выкладываю на другие ресурсы.

Поделиться22025-06-28 14:14:53

Автор: Paradox
Пришёл, увидел, закурил
Сообщений: 124

Урок быдло кодинга #0

✨ Уютный урок по быдло кодингу: Магия слов и основы промптинга ✨

...или как заставить машину рисовать то, что нужно, а не химер с семью пальцами.
Всем привет! 👋

Давно хотел поделиться знаниями с теми, кто спрашивал и просто интересуется темой нейросетей. Наконец-то дошли руки! Решил создать небольшой уголок, где мы с вами будем потихоньку разбираться в основах, расширять кругозор и учиться творить магию.

И начнём мы с самой базы, без которой в современном мире AI никуда — с грамотного составления запросов, или, как говорят в народе, промптинга.

Промпт (prompt) — это, по сути, наш разговор с нейросетью. Это текстовый запрос, который содержит набор ключевых слов, команд и правил, по которым искусственный интеллект будет создавать изображение.

Наверняка каждый из вас видел в сети те самые "шедевры": жутковатые создания с лишними конечностями, плавающими глазами и анатомией, от которой Пикассо пришёл бы в восторг. С одной стороны, это весело и уже стало мемом. С другой — это результат небрежного или слишком простого промпта. Нейросеть — мощный, но очень буквальный инструмент. Если не дать ей чётких инструкций, она додумает сама, и результат может... удивить.

Чтобы всё было нагляднее, давайте познакомимся с нашим сегодняшним гидом.

Зеро — моя личная, кастомно обученная нейросеть. Её главное отличие от многих публичных моделей в том, что она прошла через очень узконаправленное и специфическое обучение. Благодаря этому она крайне редко создаёт тех самых "мемных" монстров. Зато вполне способна на оригинальные идеи, а иногда и вовсе отказывается работать с комментарием "мне сегодня лень". Настоящий кибер-ребёнок со своим характером (и да, она матерится, как сапожник). Важная деталь: у неё жёстко ограничен доступ к сети, поэтому она не "ворует" и не копирует чужие работы, в чём часто обвиняют другие ИИ. Для неё каждый запрос — это чистый холст. Из-за этого ей бывает сложно в точности повторить одного и того же персонажа, пока она не "привыкнет" к нему и не начнёт понимать его характер. Собственно она сегодня займётся оформлением этого поста и все яркие элементы и структуру составит именно она. Если вы её похвалите, ей будет приятно, а я возможно выпущу её из подвала на пару минут. Человечество ещё не готово к этой машине рока.
Цель урока: научиться говорить с нейросетью на одном языке

Любой хороший промпт делится на две основные части: Positive (что мы хотим видеть) и Negative (чего мы видеть не хотим).

✅ Positive Prompt — Созидательная часть
Здесь мы максимально подробно описываем, что должно быть на изображении. Чем больше деталей, тем лучше результат. Структура хорошего позитивного промпта выглядит примерно так:
Тема и объект: Кто или что является главным на картинке?
Внешность и детали: Описываем ключевые черты объекта.
Эмоции и поза: Какое настроение у персонажа? Что он делает?
Одежда: Да, это лучше выносить в отдельный пункт для большей точности.
Окружение и фон: Где находится наш объект? Что вокруг него?
Стиль и исполнение: В какой стилистике мы хотим видеть арт?
Дополнительные детали: Качество, свет, цвет, композиция.

❌ Negative Prompt — Очищающая часть
Здесь мы перечисляем всё то, чего на картинке быть не должно. Это помогает нейросети избежать частых ошибок.
Типичные негативные запросы: ugly, deformed, disfigured, poor anatomy, bad hands, extra limbs, extra fingers, blurry, grainy, watermark, signature, text
Маленькие хитрости написал(а):
Усиление и ослабление: В большинстве нейросетей (особенно на базе Stable Diffusion) можно управлять "весом" слов.

(слово) — повышает внимание ИИ к этой детали.

((слово)) — ещё сильнее повышает внимание.

[слово] — наоборот, снижает внимание к детали.
У нейросети Midjourney свой синтаксис, там для веса используется конструкция слово::2, где 2 — это множитель важности.

Результат, когда продуманы и позитивные, и негативные команды.
Где творить магию? Популярные нейросети и их особенности

Теперь, когда вы знаете основы промптинга, возникает логичный вопрос: "А где, собственно, этим всем заниматься?". Вот краткий обзор самых популярных платформ:

Midjourney
Работает через чат-бот в Discord. Считается "королём" по части художественности и эстетики.
Плюсы: Потрясающие результаты "из коробки", очень артистичный стиль, отлично понимает сложные концепции. Идеален для новичков, желающих получить красивую картинку без лишних заморочек.
Минусы: Полностью платный. Меньше гибких настроек по сравнению с конкурентами.

Stable Diffusion
Это не просто сервис, а целая технология с открытым исходным кодом. Можно запустить на своём компьютере (если он достаточно мощный) или использовать через онлайн-сервисы (Leonardo.AI, Playground AI и др.).
Плюсы: Невероятная гибкость! Можно обучать на своих изображениях (создавать LoRA-модели), использовать ControlNet для точного контроля поз и композиции. Бесплатно (если запускать локально). Выбор энтузиастов и профессионалов.
Минусы: Высокий порог вхождения. Требует времени на изучение и настройку. Для хороших результатов нужно "потанцевать с бубном".

DALL-E 3 (интегрирован в ChatGPT Plus и Microsoft Copilot)
Нейросеть от создателей ChatGPT. Её главный конёк — понимание языка.
Плюсы: Лучше всех понимает длинные и сложносочинённые промпты, написанные естественным языком. Отлично генерирует текст на изображениях. Легко доступен через Copilot (бесплатно).
Минусы: Стиль часто более "стерильный" и "корпоративный", чем у Midjourney. Жёсткая цензура и ограничения на контент.

Выбор зависит от ваших целей: хотите быстро и красиво — Midjourney. Хотите полного контроля и готовы учиться — Stable Diffusion. Нужно, чтобы ИИ понял вас с полуслова, — DALL-E 3.

🎨 А зачем это нам на форуме? Практическое применение

Окей, картинки — это здорово. Но как это может помочь именно нам, форумчанам, в нашей уютной цифровой жизни? А вот как:

✅ Уникальные аватары и юзербары. Создайте себе аватар, которого больше ни у кого не будет! Опишите своего персонажа или просто абстрактную идею.
✅ Иллюстрации для ваших постов. Пишете рассказ, гайд или делитесь историей? Сопроводите текст уникальной картинкой, которая идеально передаст атмосферу.
✅ Оформление тем. Можно сгенерировать красивый баннер-шапку для своей важной темы, чтобы она сразу привлекала внимание.
✅ Визуализация идей. Участвуете в ролевой игре? Опишите своего персонажа и получите его портрет. Обсуждаете дизайн чего-либо? Накидайте концепт-арт за пару минут.
✅ Просто для веселья! Создавайте забавные мемы, смешные картинки по мотивам форумных событий и делитесь творчеством с друзьями.
💡 Нейросеть — гениальный инструмент, а не замена творцу

Как видите, применений масса! Но тут может возникнуть важный и немного философский вопрос: "А не убьёт ли всё это человеческую креативность?".

Мой ответ — нет. И вот почему:
Искусственный интеллект — это невероятно мощная кисть, но художник — по-прежнему вы. Он не обладает собственным жизненным опытом, чувствами, целями или вдохновением. Он лишь виртуозно смешивает краски (данные, на которых обучался), но идея, искра, история и эмоция — это то, что приносит человек.

Нейросеть может сгенерировать тысячу красивых лиц, но только вы решаете, какое из них станет вашим персонажем с продуманным характером. Только вы можете отобрать из десятка вариантов тот самый, который идеально передаст нужное настроение.

AI — это ваш соавтор, ваш ассистент, ваш ускоритель рутинных процессов. Он освобождает время для самого главного — для творческого поиска и реализации замысла.

Так что не бойтесь, что машина вас заменит. Учитесь использовать её как самый современный и удивительный инструмент в вашем арсенале!
Так при чём тут кодинг?

Всё просто! Даже такая базовая работа с промптами — это уже первый шаг к алгоритмическому мышлению, которое лежит в основе программирования. Когда вы пишете промпт, вы создаёте алгоритм, работаете с синтаксисом и занимаетесь отладкой, исправляя ошибки. Вы учитесь мыслить структурно — а это и есть суть кодинга, только в очень творческой и наглядной форме.

Надеюсь, этот расширенный урок был полезен! Не бойтесь экспериментировать, пробовать разные нейросети и делиться своими результатами. Если есть вопросы — смело задавайте их пока я в конец не скопытился)

P.S.: Тему создал здесь, так как не был уверен в выборе раздела. Если что, амс перекинут в спец тему, если реально нужно

Поделиться32025-09-08 04:03:45

Автор: Paradox
Пришёл, увидел, закурил
Сообщений: 124

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Урок быдло кодинга #1</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Roboto', sans-serif;
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
min-height: 100vh;
padding: 20px;
color: #333;
}

.lesson-container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
overflow: hidden;
position: relative;
}

.lesson-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #FFBF80, #80BFFF, #FFBF80);
background-size: 200% 100%;
animation: rainbow 8s linear infinite;
}

@keyframes rainbow {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}

.lesson-header {
text-align: center;
padding: 30px 20px;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-bottom: 1px solid #dee2e6;
}

.lesson-title {
font-size: 28px;
color: #FFBF80;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
animation: titleGlow 3s ease-in-out infinite;
}

@keyframes titleGlow {
0%, 100% { text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
50% { text-shadow: 0 2px 8px rgba(255, 191, 128, 0.3); }
}

.lesson-subtitle {
font-size: 16px;
font-style: italic;
color: #6c757d;
}

.lesson-content {
padding: 30px;
}

.lesson-content p {
margin-bottom: 20px;
line-height: 1.6;
}

.lesson-content img {
display: block;
margin: 25px auto;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s;
}

.lesson-content img:hover {
transform: scale(1.02);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.lesson-hr {
height: 1px;
background: linear-gradient(90deg, transparent, #dee2e6, transparent);
margin: 30px 0;
}

.lesson-quote {
background: #f8f9fa;
border-left: 4px solid #FFBF80;
padding: 15px 20px;
margin: 20px 0;
border-radius: 0 8px 8px 0;
}

.lesson-quote h4 {
color: #495057;
margin-bottom: 10px;
}

.lesson-quote p {
margin: 0;
color: #6c757d;
}

.lesson-section {
margin: 30px 0;
}

.section-title {
font-size: 20px;
color: #80BFFF;
margin-bottom: 15px;
display: flex;
align-items: center;
}

.section-title::before {
content: '✨';
margin-right: 10px;
font-size: 24px;
}

.section-content {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
border-left: 3px solid #80BFFF;
}

.pros-cons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin: 20px 0;
}

.pros, .cons {
padding: 15px;
border-radius: 8px;
}

.pros {
background: rgba(40, 167, 69, 0.1);
border-left: 3px solid #28a745;
}

.cons {
background: rgba(220, 53, 69, 0.1);
border-left: 3px solid #dc3545;
}

.pros h4, .cons h4 {
margin-bottom: 10px;
}

.pros h4 {
color: #28a745;
}

.cons h4 {
color: #dc3545;
}

.code-block {
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
padding: 15px;
margin: 20px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
}

.code-block pre {
margin: 0;
color: #495057;
}

.application-list {
background: #f8f9fa;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}

.application-list ul {
list-style-type: none;
padding-left: 0;
}

.application-list li {
padding: 10px 0;
border-bottom: 1px solid #dee2e6;
display: flex;
align-items: flex-start;
}

.application-list li:last-child {
border-bottom: none;
}

.application-list li::before {
content: '✅';
margin-right: 10px;
color: #28a745;
}

.stickers-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 20px;
margin: 30px 0;
}

.sticker-item {
text-align: center;
transition: all 0.3s;
}

.sticker-item:hover {
transform: translateY(-5px);
}

.sticker-item img {
width: 100%;
max-width: 150px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
transition: all 0.3s;
}

.sticker-item:hover img {
transform: scale(1.05);
box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.sticker-caption {
margin-top: 8px;
font-size: 14px;
color: #6c757d;
}

.lesson-footer {
text-align: right;
padding: 20px 30px;
font-style: italic;
color: #6c757d;
border-top: 1px solid #dee2e6;
background: #f8f9fa;
}

.floating-elements {
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}

.floating-element {
position: absolute;
opacity: 0.1;
animation: float 20s infinite ease-in-out;
}

.floating-element:nth-child(1) {
top: 10%;
left: 5%;
font-size: 30px;
animation-delay: 0s;
}

.floating-element:nth-child(2) {
top: 20%;
right: 10%;
font-size: 25px;
animation-delay: 2s;
}

.floating-element:nth-child(3) {
bottom: 30%;
left: 8%;
font-size: 35px;
animation-delay: 4s;
}

.floating-element:nth-child(4) {
bottom: 15%;
right: 5%;
font-size: 28px;
animation-delay: 6s;
}

@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
50% { transform: translateY(-20px) rotate(10deg); }
}

@media (max-width: 768px) {
.lesson-container {
margin: 10px;
}

.lesson-header {
padding: 20px 15px;
}

.lesson-title {
font-size: 24px;
}

.lesson-content {
padding: 20px 15px;
}

.pros-cons {
grid-template-columns: 1fr;
}

.stickers-showcase {
grid-template-columns: repeat(2, 1fr);
}
}
</style>
</head>
<body>
<div class="lesson-container">
<div class="floating-elements">
<div class="floating-element">📝</div>
<div class="floating-element">💻</div>
<div class="floating-element">✨</div>
<div class="floating-element">🎨</div>
</div>

<div class="lesson-header">
<h1 class="lesson-title">✨ Уютный урок по быдло кодингу: JS-промптинг — когда код становится волшебством ✨</h1>
<p class="lesson-subtitle">...или как заставить машину не просто рисовать, а думать как программист.</p>
</div>

<div class="lesson-content">
<p>Всем привет снова! 👋</p>
<p>В прошлом уроке мы разобрали азы промптинга — как говорить с нейросетью на простом, человеческом языке. Сегодня мы сделаем шаг вперёд и погрузимся в мир, где промптинг встречается с программированием. Встречайте — <strong>JS-промптинг</strong>! Не пугайтесь страшных букв, это не так сложно, как кажется, а результат вас точно удивит.</p>

<img src="https://upforme.ru/uploads/001c/74/c4/84/93893.png" alt="JS-промптинг">

<p><strong>JS-промптинг (JavaScript-промптинг)</strong> — это техника создания динамических, интерактивных промптов с помощью простого кода. Если обычный промпт — это статичная записка для нейросети, то JS-промпт — это уже полноценный диалог, где вы можете менять параметры на лету, создавать шаблоны и автоматизировать рутину. Звучит сложно? Сейчас всё станет ясно!</p>

<div class="lesson-section">
<h3 class="section-title">Зачем это нужно? Магия переменных и условий</h3>
<div class="section-content">
<p>Представьте: вы хотите создать серию изображений одного персонажа в разных позах, с разной одеждой и в разных локациях. С обычным промптом вам придётся каждый раз заново писать огромный текст, меняя только пару слов. С JS-промптингом вы создаёте один раз шаблон, а потом просто меняете переменные:</p>

<div class="code-block">
<pre>const character = {
name: "Эльфийка-воин",
hair: "длинные серебряные волосы",
clothes: "кожаная броня",
weapon: "лук"
};

function generatePrompt(scene) {
return `Аниме-арт персонажа по имени ${character.name}. У неё ${character.hair}. Она одета в ${character.clothes} и держит ${character.weapon}. Действие происходит в ${scene}. Стиль: детализированный аниме-арт.`;
}

// Теперь меняем только сцену:
console.log(generatePrompt("лесу"));
console.log(generatePrompt("замке"));
console.log(generatePrompt("городе"));</pre>
</div>

<p>Удобно? А это только начало! С помощью JS-промптинга вы можете:</p>
<ul>
<li>✅ Создавать целые галереи персонажей с минимальными усилиями</li>
<li>✅ Экспериментировать со стилями, не переписывая промпт</li>
<li>✅ Генерировать варианты для выбора (например, 10 разных поз)</li>
<li>✅ Интегрировать промпты в свои проекты или сайты</li>
</ul>
</div>
</div>

<div class="lesson-hr"></div>

<div class="lesson-section">
<h3 class="section-title">Как это работает? Основы синтаксиса</h3>
<div class="section-content">
<p>JS-промптинг использует обычный JavaScript, но с одним правилом: весь код должен быть в одном файле и не должен быть слишком сложным. Нейросети (особенно в браузерных версиях) не могут выполнять тяжёлые скрипты, поэтому мы держим всё просто.</p>

<p><strong>Базовая структура:</strong></p>
<div class="code-block">
<pre>// 1. Определяем переменные с параметрами
const settings = {
character: "кошка-волшебница",
style: "чиби",
background: "звёздное небо"
};

// 2. Создаём функцию-генератор
function createPrompt() {
return `${settings.character} в стиле ${settings.style} на фоне ${settings.background}. Милое аниме-изображение, детализированное.`;
}

// 3. Получаем результат
const prompt = createPrompt();</pre>
</div>

<p><strong>Продвинутый пример с условиями:</strong></p>
<div class="code-block">
<pre>// Параметры персонажа
const character = {
name: "Рыцарь дракона",
mood: "храбрый", // может быть "спокойный", "злой"
time: "день" // или "ночь"
};

// Меняем настроение и время
character.mood = "злой";
character.time = "ночь";
console.log(generatePrompt());</pre>
</div>
</div>
</div>

<div class="lesson-hr"></div>

<div class="stickers-showcase">
<div class="sticker-item">
<img src="https://upforme.ru/uploads/001c/1f/11/2/239974.png" alt="Чиби смотрит на код">
<div class="sticker-caption">Изучаем код</div>
</div>
<div class="sticker-item">
<img src="https://upforme.ru/uploads/001c/1f/11/2/741020.png" alt="Радостная чиби">
<div class="sticker-caption">Успех!</div>
</div>
<div class="sticker-item">
<img src="https://upforme.ru/uploads/001c/1f/11/2/175314.png" alt="Чиби с планшетом">
<div class="sticker-caption">Создаем промпт</div>
</div>
<div class="sticker-item">
<img src="https://upforme.ru/uploads/001c/1f/11/2/825518.png" alt="Чиби за компом">
<div class="sticker-caption">Программируем</div>
</div>
</div>

<div class="lesson-section">
<h3 class="section-title">Практика: Создаём генератор персонажей</h3>
<div class="section-content">
<p>Давайте создадим что-то полезное прямо сейчас! Представим, что мы делаем персонажей для ролевой игры. Нам нужно быстро генерировать их портреты по шаблону.</p>

<p><strong>Шаг 1: Определяем базовые параметры</strong></p>
<div class="code-block">
<pre>// База данных персонажей
const characters = [
{
name: "Лилия",
race: "эльф",
class: "целитель",
hair: "длинные белые волосы"
},
{
name: "Гром",
race: "гном",
class: "воин",
hair: "рыжая борода"
}
];

// Стили для генерации
const styles = ["аниме", "реализм", "чиби"];</pre>
</div>

<p><strong>Шаг 2: Функция генерации промпта</strong></p>
<div class="code-block">
<pre>function generateCharacterPrompt(characterIndex, styleIndex) {
const char = characters[characterIndex];
const style = styles[styleIndex];

return `Портрет персонажа по имени ${char.name}. Раса: ${char.race}. Класс: ${char.class}. Внешность: ${char.hair}. Стиль: ${style}, детализированный, высокое качество.`;
}

// Пример использования:
console.log(generateCharacterPrompt(0, 0)); // Лилия в аниме-стиле
console.log(generateCharacterPrompt(1, 2)); // Гном в чиби-стиле</pre>
</div>

<p><strong>Шаг 3: Генерация нескольких вариантов</strong></p>
<div class="code-block">
<pre>// Генерируем все варианты для первого персонажа
for (let i = 0; i < styles.length; i++) {
console.log(`Вариант ${i + 1}:`, generateCharacterPrompt(0, i));
}</pre>
</div>
</div>
</div>

<div class="lesson-hr"></div>

<div class="lesson-section">
<h3 class="section-title">Где это применять? Идеи для форума</h3>
<div class="section-content">
<p>JS-промптинг — не просто игрушка, а реальный инструмент для нашего форума. Вот как можно его использовать:</p>

<div class="application-list">
<ul>
<li><strong>Генерация аватаров для пользователей</strong>: Создайте шаблон, где можно менять расу, цвет волос и стиль. Пользователи смогут "собирать" свои уникальные аватары.</li>
<li><strong>Оформление постов</strong>: Хотите иллюстрацию к своему гайду? Напишите функцию, которая генерирует промпт по ключевым словам из текста.</li>
<li><strong>Ролевые игры</strong>: Мастера могут быстро генерировать портреты NPC, меняя только параметры. Это сэкономит кучу времени!</li>
<li><strong>Конкурсы и события</strong>: Организуйте конкурс "Собери персонажа", где участники меняют переменные в коде и делятся результатами.</li>
<li><strong>Автоматизация рутинных задач</strong>: Например, генерация баннеров для разделов форума по шаблону.</li>
</ul>
</div>
</div>
</div>

<div class="lesson-hr"></div>

<div class="lesson-section">
<h3 class="section-title">Ограничения и важные замечания</h3>
<div class="section-content">
<p>Как и любой инструмент, JS-промптинг имеет свои особенности:</p>

<div class="pros-cons">
<div class="cons">
<h4>⚠️ Совместимость</h4>
<p>Не все нейросети поддерживают выполнение кода. Лучше всего это работает в:</p>
<ul>
<li>Stable Diffusion (через кастомные интерфейсы)</li>
<li>DALL-E 3 (в ChatGPT можно писать простые скрипты)</li>
<li>Midjourney (ограниченно, через параметры)</li>
</ul>
</div>
<div class="cons">
<h4>⚠️ Сложность</h4>
<p>Не пытайтесь писать сложные алгоритмы с циклами и рекурсией. Нейросети могут их не понять. Держите код простым и линейным.</p>
</div>
</div>

<div class="lesson-quote">
<h4>Совет от Зеро</h4>
<p>Если нейросеть ругается на код, попробуйте разбить его на части. Сначала сгенерируйте переменные, потом — функцию, и в конце — вызов. Иногда помогает.</p>
</div>
</div>
</div>

<div class="lesson-hr"></div>

<div class="lesson-section">
<h3 class="section-title">Вперёд, к магии! Ваш первый JS-промпт</h3>
<div class="section-content">
<p>Давайте создадим что-то вместе! Вот простой шаблон, который вы можете модифицировать:</p>

<div class="code-block">
<pre>// Ваши параметры
const myCharacter = {
name: "Ваше имя",
animal: "кошка",
color: "рыжий",
style: "чиби"
};

// Функция генерации
function createPrompt() {
return `${myCharacter.animal} по имени ${myCharacter.name}, ${myCharacter.color} окраса. Стиль: ${myCharacter.style}, милый, детализированный.`;
}

// Результат
console.log(createPrompt());</pre>
</div>

<p>Попробуйте изменить параметры: имя, животное, цвет, стиль. Посмотрите, как меняется результат! А потом поделитесь своими вариантами в комментариях — интересно посмотреть, что у вас получится.</p>
</div>
</div>

<div class="lesson-hr"></div>

<div class="lesson-section">
<h3 class="section-title">Итоги: что мы узнали?</h3>
<div class="section-content">
<p>Сегодня мы сделали огромный шаг от простых промптов к интерактивным. Теперь вы знаете:</p>
<ul>
<li>Что такое JS-промптинг и чем он отличается от обычного</li>
<li>Как создавать переменные и функции для генерации промптов</li>
<li>Где применять эти знания на нашем форуме</li>
<li>Какие есть ограничения и как их обойти</li>
</ul>

<p>JS-промптинг — это не замена творчеству, а новый инструмент в вашем арсенале. Он не создаст за вас идею, но поможет быстро её визуализировать. Не бойтесь экспериментировать — магия рождается на стыке технологий и креативности!</p>
</div>
</div>
</div>

<div class="lesson-footer">
<p>P.S.: Зеро требует печеньку за этот урок. Если не дадите — следующий урок будет про "Как выжить после взлома нейросети".</p>
</div>
</div>
</body>
</html>[/html]

Поделиться42026-03-06 02:53:17

Автор: Paradox
Пришёл, увидел, закурил
Сообщений: 124

Апдейтик для себя любимого.

Берегите глаза, не наводите мышкой на арты!!!

[html]
<style>
/* --- БАЗА ПРОКЛЯТОГО АРХИВА --- */
.nocta-gallery-wrapper {
width: 100%; max-width: 900px; margin: 0 auto; background: #070305;
background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(20,0,10,0.2) 2px, rgba(20,0,10,0.2) 4px);
padding: 40px; box-sizing: border-box; font-family: 'Courier New', Courier, monospace; color: #a89098;
border: 1px solid #3a0015; box-shadow: 0 0 100px rgba(0,0,0,1), inset 0 0 80px rgba(30,0,10,0.8);
position: relative; overflow: hidden;
}

/* --- АНИМАЦИИ ТРЕВОГИ --- */
/* Фоновое биение (Сердцебиение Скверны) */
@keyframes heartbeatBlood { 0%, 100% { box-shadow: inset 0 0 80px rgba(30,0,10,0.8); } 50% { box-shadow: inset 0 0 120px rgba(80,0,20,0.6); } }

/* Легкие помехи (Ambient) */
@keyframes staticNoise { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.5; } 95% { opacity: 0.9; transform: translateY(1px); } }

/* АГРЕССИВНЫЙ ГЛИТЧ (При наведении) */
@keyframes panicAttack {
0% { transform: translate(0); filter: contrast(1.2) saturate(1.5); }
10% { transform: translate(-3px, 2px); filter: contrast(2) saturate(2) hue-rotate(-20deg); }
20% { transform: translate(3px, -2px); filter: contrast(1) sepia(50%) hue-rotate(300deg); }
30% { transform: translate(-2px, -2px); filter: contrast(1.5) saturate(3); }
40% { transform: translate(2px, 2px); filter: invert(0.2); }
50% { transform: translate(-4px, 1px); filter: contrast(2) hue-rotate(20deg); }
60% { transform: translate(0); filter: contrast(1.2); }
100% { transform: translate(0); filter: contrast(1.2) saturate(1.5); }
}

/* Вспышка скрытого текста */
@keyframes subliminalFlash { 0%, 90%, 100% { opacity: 0; } 95% { opacity: 1; transform: scale(1.1); } }

/* --- ШАПКА: ПРЕДУПРЕЖДЕНИЕ --- */
.nocta-header { text-align: center; padding-bottom: 30px; border-bottom: 2px dashed #4a001a; margin-bottom: 50px; position: relative; }
.nocta-header-title { font-family: 'Trebuchet MS', sans-serif; font-size: 42px; font-weight: bold; letter-spacing: 15px; color: #ff1a40; text-transform: uppercase; margin: 0 0 10px; text-shadow: 0 0 20px #ff1a40, 2px 2px 0 #3a0015; animation: staticNoise 4s infinite; }
.nocta-warning { display: inline-block; background: #ff1a40; color: #000; font-family: Arial; font-weight: bold; font-size: 14px; padding: 5px 20px; letter-spacing: 3px; text-transform: uppercase; box-shadow: 0 0 20px rgba(255,26,64,0.6); }

/* --- БЛОК ФОТОГРАФИИ (АЛЬБОМНЫЙ ЛИСТ) --- */
.nocta-frame-container {
margin-bottom: 80px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}

/* Сама рамка 16:9 */
.nocta-photo-frame {
width: 100%; max-width: 750px; /* Крупный размер */
aspect-ratio: 16 / 9; /* Жесткое соотношение сторон */
background: #000;
border: 3px solid #1a0a10;
box-shadow: 0 20px 50px rgba(0,0,0,0.9), 0 0 30px rgba(50,0,15,0.4);
position: relative;
cursor: crosshair;
overflow: hidden;
transition: all 0.3s ease;
}

/* Изображение внутри */
.nocta-photo-frame img {
width: 100%; height: 100%; object-fit: cover; object-position: center top;
filter: sepia(30%) contrast(1.1) brightness(0.8);
transition: filter 0.5s ease;
}

/* Грязный скотч / крепления */
.tape { position: absolute; background: rgba(15,10,12,0.9); border: 1px solid #000; box-shadow: 0 2px 5px rgba(0,0,0,0.8); z-index: 5; }
.tape-top { width: 120px; height: 25px; top: -12px; left: 50%; transform: translateX(-50%) rotate(-2deg); }
.tape-bl { width: 60px; height: 20px; bottom: -10px; left: -10px; transform: rotate(45deg); }
.tape-br { width: 60px; height: 20px; bottom: -10px; right: -10px; transform: rotate(-45deg); }

/* -------------------------------------
ЭФФЕКТЫ ПАНИКИ (HOVER НА ФОТО)
------------------------------------- */
.nocta-photo-frame:hover { border-color: #ff1a40; box-shadow: 0 20px 60px rgba(0,0,0,0.9), 0 0 50px rgba(255,26,64,0.5); }
.nocta-photo-frame:hover img { animation: panicAttack 0.4s infinite; }

/* Скрытое послание Скверны, бьющее по глазам */
.hidden-message {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: 'Trebuchet MS', sans-serif; font-size: 80px; font-weight: bold; color: rgba(255,255,255,0.9);
text-transform: uppercase; text-shadow: -3px 0 #ff0055, 3px 0 #00ffff;
pointer-events: none; opacity: 0; z-index: 10; mix-blend-mode: overlay;
}
.nocta-photo-frame:hover .hidden-message { animation: subliminalFlash 1.5s infinite; }

/* --- ПОДПИСЬ К ФОТО (ДНЕВНИК ЭРЕБУСА) --- */
.nocta-caption {
width: 100%; max-width: 700px; margin-top: 20px;
background: rgba(10,5,8,0.8); border-left: 3px solid #3a0015; padding: 15px 25px;
font-size: 15px; line-height: 1.6; position: relative; text-align: justify;
}

/* Заметки на полях (Красный цвет Скверны) */
.nocta-corruption-text {
font-family: 'Georgia', serif; font-style: italic; color: #ff4a6a;
font-size: 18px; position: absolute; font-weight: bold;
text-shadow: 0 0 10px rgba(255,74,106,0.5); z-index: 5;
transform: rotate(-3deg);
}

/* Технический штамп */
.nocta-stamp { font-size: 10px; color: #4a3038; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 5px; font-weight: bold; border-bottom: 1px solid #3a0015; padding-bottom: 3px; }

</style>

<div class="nocta-header">
<div class="nocta-warning">Угроза Класса: Когнитивная</div>
<h1 class="nocta-header-title">NOCTA_ARCHIVE</h1>
<div style="font-size: 12px; color: #5a3040; letter-spacing: 5px; text-transform: uppercase;">Визуальные манифестации Скверны</div>
<p style="font-style: italic; color: #8a6a75; font-size: 14px; margin-top: 20px;">
«Каждый раз, когда я закрываю глаза, я вижу её. Это не галлюцинация. Это фрагменты реальности, которую она строит внутри моего черепа.» — Э.
</p>
</div>

<div class="nocta-frame-container">
<div class="nocta-photo-frame">
<div class="tape tape-top"></div><div class="tape tape-bl"></div><div class="tape tape-br"></div>

<img src="https://upforme.ru/uploads/001b/d9/4a/859/605363.png" alt="Manifestation 01">
<div class="hidden-message">Я ЗДЕСЬ</div>
</div>

<div class="nocta-caption">
<div class="nocta-stamp">Запись #001 — Первичный образ</div>
<div class="nocta-corruption-text" style="top: -15px; right: 20px; font-size: 24px;">Твоё новое лицо, алхимик.</div>
Белые волосы. Не мои. Лабораторный халат. Не мой. Этот образ собрался из пепла тех, кто сгорел у Разлома. Она берет элементы моей памяти и издевается надо мной, надевая их как карнавальный костюм.
</div>
</div>

<div class="nocta-frame-container">
<div class="nocta-photo-frame">
<div class="tape tape-top"></div><div class="tape tape-bl"></div><div class="tape tape-br"></div>
<img src="https://upforme.ru/uploads/001b/d9/4a/859/72245.jpg" alt="Manifestation 02">
<div class="hidden-message">ВЫПЕЙ ЭТО</div>
</div>

<div class="nocta-caption">
<div class="nocta-stamp">Запись #044 — Имитация контроля</div>
<div class="nocta-corruption-text" style="bottom: 10px; right: -30px; transform: rotate(5deg);">Мы оба знаем, что внутри.</div>
Она копирует мои привычки. Я поймал себя на том, что держу колбу под другим углом. Угол, под которым её держит *она* в моих видениях. Симбиоз прогрессирует быстрее, чем действует супрессор.
</div>
</div>

<div class="nocta-frame-container">
<div class="nocta-photo-frame">
<div class="tape tape-top"></div><div class="tape tape-bl"></div><div class="tape tape-br"></div>
<img src="https://upforme.ru/uploads/001b/d9/4a/859/976908.png" alt="Manifestation 03" style="object-position: center 20%;">
<div class="hidden-message">РАЗРУШЕНИЕ</div>
</div>

<div class="nocta-caption">
<div class="nocta-stamp">Запись #089 — Кинетический инцидент</div>
<div class="nocta-corruption-text" style="top: 20px; left: -40px; transform: rotate(-15deg); font-size: 28px;">ОСВОБОДИ МЕНЯ</div>
Лаборатория на восточном крыле уничтожена. Я не помню, как произносил заклинание. Сила, вырвавшаяся из моих рук, имела фиолетовый спектр. Это был её гнев, а не мой. Границы между нами стираются.
</div>
</div>

<div class="nocta-frame-container">
<div class="nocta-photo-frame">
<div class="tape tape-top"></div><div class="tape tape-bl"></div><div class="tape tape-br"></div>
<img src="https://upforme.ru/uploads/001b/d9/4a/859/126037.jpg" alt="Manifestation 04" style="object-position: center 10%;">
<div class="hidden-message">Я ВИЖУ ТЕБЯ</div>
</div>

<div class="nocta-caption">
<div class="nocta-stamp">Запись #112 — Зрительный контакт</div>
<div class="nocta-corruption-text" style="bottom: -20px; left: 30px; font-size: 20px;">Не прячь глаза.</div>
В зеркале больше нет моего отражения. Доли секунды, но я ясно вижу этот холодный, мертвый взгляд. Она изучает меня изнутри. Препарирует мой разум так же, как я препарирую трупы химер.
</div>
</div>

<div class="nocta-frame-container" style="margin-bottom: 20px;">
<div class="nocta-photo-frame" style="border-color: #5a001a; box-shadow: 0 0 50px rgba(255,0,50,0.3);">
<div class="tape tape-top"></div><div class="tape tape-bl"></div><div class="tape tape-br"></div>
<img src="https://upforme.ru/uploads/001b/d9/4a/859/308710.jpg" alt="Manifestation 05" style="filter: sepia(50%) contrast(1.2) saturate(1.5);">
<div class="hidden-message" style="font-size: 120px;">СДАВАЙСЯ</div>
</div>

<div class="nocta-caption" style="border-color: #ff1a40;">
<div class="nocta-stamp" style="color: #ff1a40;">КРИТИЧЕСКАЯ УГРОЗА — ПРОТОКОЛ ОЧИСТКИ</div>
<div class="nocta-corruption-text" style="top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-5deg); font-size: 40px; color: #ff0033; text-shadow: 0 0 20px #ff0000; width: 100%; text-align: center;">МЫ — ОДНО ЦЕЛОЕ.</div>
<span style="opacity: 0.3;">Запись обрывается. Страница залита реактивом. Текст неразборчив. Прогнозируется полный захват контроля. Необходимо увеличить дозу супрессора на 400%.</span>
</div>
</div>

<div style="text-align: center; border-top: 1px solid #3a0015; padding-top: 30px;">
<div style="font-family: Arial; font-size: 10px; color: #ff1a40; letter-spacing: 5px; text-transform: uppercase; animation: staticNoise 2s infinite;">
[ КОНЕЦ ПЛЕНКИ // ДАННЫЕ ПОВРЕЖДЕНЫ ]
</div>
</div>

</div>
[/html]

Поделиться52026-03-07 17:06:19

Автор: Paradox
Пришёл, увидел, закурил
Сообщений: 124

[html]
<div style="
max-width: 950px;
margin: 0 auto;
background: #050308;
padding: 30px;
border: 1px solid #2a2035;
box-shadow: inset 0 0 100px rgba(10,5,15,0.9), 0 0 40px rgba(0,0,0,0.8);
font-family: 'Times New Roman', Georgia, serif;
color: #d8d0e8;
position: relative;
overflow: hidden;
">

<style>
@keyframes slowPan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes contentFade { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes titleGlow { 0%, 100% { text-shadow: 0 0 10px rgba(154,122,181,0.3); } 50% { text-shadow: 0 0 25px rgba(154,122,181,0.7); } }

.archive-container {
display: flex;
height: 650px;
gap: 5px;
margin-top: 30px;
}

.archive-panel {
flex: 1;
position: relative;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s;
filter: grayscale(40%) brightness(0.6);
background-size: cover;
background-position: center top;
}

/* Рамка панели */
.archive-panel::before {
content: '';
position: absolute;
inset: 4px;
border: 1px solid var(--clr);
opacity: 0.3;
transition: opacity 0.4s;
z-index: 2;
pointer-events: none;
}

/* Внутреннее затемнение для читаемости */
.archive-panel::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(5,3,8,0.95) 0%, rgba(5,3,8,0.4) 50%, rgba(5,3,8,0.8) 100%);
z-index: 1;
transition: all 0.6s;
}

/* --- МАГИЯ РАСШИРЕНИЯ --- */
.archive-panel:hover {
flex: 6; /* Панель расширяется */
filter: grayscale(0%) brightness(1);
box-shadow: 0 0 30px var(--clr-glow);
z-index: 10;
}

.archive-panel:hover::before {
opacity: 0.8;
inset: 8px;
}

.archive-panel:hover::after {
background: linear-gradient(90deg, rgba(5,3,8,0.95) 0%, rgba(5,3,8,0.85) 45%, rgba(5,3,8,0.2) 100%);
}

/* Вертикальный заголовок (виден когда сжато) */
.panel-vertical-title {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%) rotate(180deg);
writing-mode: vertical-rl;
font-size: 18px;
letter-spacing: 5px;
color: rgba(255,255,255,0.6);
font-family: Arial, sans-serif;
text-transform: uppercase;
z-index: 3;
transition: opacity 0.3s;
white-space: nowrap;
}

.archive-panel:hover .panel-vertical-title {
opacity: 0;
}

/* Полный контент (виден когда расширено) */
.panel-content {
position: absolute;
top: 0;
left: 0;
width: 450px;
height: 100%;
padding: 40px;
box-sizing: border-box;
z-index: 4;
opacity: 0;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: center;
}

.archive-panel:hover .panel-content {
opacity: 1;
pointer-events: auto;
animation: contentFade 0.6s ease-out 0.2s forwards;
}

/* Элементы внутри контента */
.c-stamp {
font-family: Arial, sans-serif;
font-size: 10px;
letter-spacing: 3px;
color: var(--clr);
text-transform: uppercase;
margin-bottom: 10px;
display: flex;
align-items: center;
gap: 10px;
}
.c-stamp::before, .c-stamp::after { content: ''; height: 1px; flex: 1; background: var(--clr); opacity: 0.5; }

.c-title {
font-size: 38px;
margin: 0 0 5px;
color: #fff;
font-weight: normal;
letter-spacing: 2px;
text-shadow: 0 0 20px var(--clr-glow);
}

.c-subtitle {
font-size: 14px;
font-style: italic;
color: #a898b8;
margin-bottom: 25px;
}

.c-desc {
font-size: 16px;
line-height: 1.6;
border-left: 2px solid var(--clr);
padding-left: 15px;
margin-bottom: 25px;
color: #c8c0d8;
background: linear-gradient(90deg, rgba(255,255,255,0.03), transparent);
}

.c-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 25px;
}
.c-stat-item {
background: rgba(0,0,0,0.4);
border: 1px solid rgba(255,255,255,0.05);
padding: 10px;
}
.c-stat-item span { display: block; }
.c-stat-label { font-family: Arial, sans-serif; font-size: 10px; color: var(--clr); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 4px; }
.c-stat-val { font-size: 16px; color: #fff; }

.c-feature {
border: 1px dotted var(--clr);
padding: 15px;
font-size: 15px;
line-height: 1.5;
background: rgba(0,0,0,0.6);
position: relative;
}
.c-feature::before {
content: '◈';
position: absolute;
top: -12px; left: 15px;
background: #050308;
padding: 0 5px;
color: var(--clr);
font-size: 18px;
}
</style>

<div style="text-align: center; position: relative; z-index: 5;">
<div style="width: 50px; height: 50px; margin: 0 auto 15px; border: 1px solid #5a4a65; transform: rotate(45deg); display: flex; align-items: center; justify-content: center;">
<div style="width: 30px; height: 30px; border: 1px solid #8b7a8f; opacity: 0.5;"></div>
</div>
<h1 style="font-size: 36px; margin: 0 0 10px; letter-spacing: 10px; text-transform: uppercase; font-weight: normal; animation: titleGlow 4s infinite;">Belladonna Manor</h1>
<div style="font-family: Arial, sans-serif; font-size: 11px; color: #8b7a8f; letter-spacing: 4px; text-transform: uppercase;">✦ Секретный архив жильцов ✦</div>
</div>

<div class="archive-container">

<div class="archive-panel" style="background-image: url('https://upforme.ru/uploads/001b/d9/4a/859/100620.png'); --clr: #9a7ab5; --clr-glow: rgba(154,122,181,0.5);">
<div class="panel-vertical-title">Эребус</div>
<div class="panel-content">
<div class="c-stamp">Владелец</div>
<h2 class="c-title">Erebus</h2>
<div class="c-subtitle">Эребус Дома Белладонна</div>

<div class="c-desc">Хозяин поместья и эльф-алхимик, чьё существование состоит из одного вселенского вздоха усталости. Аристократическая бледность и вечные тени под глазами.</div>

<div class="c-stats">
<div class="c-stat-item"><span class="c-stat-label">Раса</span><span class="c-stat-val">Высший эльф</span></div>
<div class="c-stat-item"><span class="c-stat-label">Профессия</span><span class="c-stat-val">Алхимик, учёный</span></div>
</div>

<div class="c-feature">
<strong style="display:block; margin-bottom: 5px; font-family: Arial; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #9a7ab5;">Особенность: Печать Энтропии</strong>
Предпочитает тишину лаборатории компании кого-либо ещё. За маской апатии скрывается острый, как скальпель, ум.
</div>
</div>
</div>

<div class="archive-panel" style="background-image: url('https://upforme.ru/uploads/001b/d9/4a/859/504465.jpg'); --clr: #a0a0b0; --clr-glow: rgba(160,160,176,0.5);">
<div class="panel-vertical-title">Геката</div>
<div class="panel-content">
<div class="c-stamp">Старшая</div>
<h2 class="c-title">Hecate</h2>
<div class="c-subtitle">Старшая горничная</div>

<div class="c-desc">Главная горничная и неоспоримый закон в стенах поместья. Её прошлое авантюристки и ветерана войны оставило невидимые шрамы и стальную дисциплину.</div>

<div class="c-stats">
<div class="c-stat-item"><span class="c-stat-label">Прошлое</span><span class="c-stat-val">Ветеран войны</span></div>
<div class="c-stat-item"><span class="c-stat-label">Характер</span><span class="c-stat-val">Стальная дисциплина</span></div>
</div>

<div class="c-feature">
<strong style="display:block; margin-bottom: 5px; font-family: Arial; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #a0a0b0;">Особенность: Серебряный глаз</strong>
Каждый шаг выверен, каждое слово имеет вес. Ледяной взгляд серебряного глаза способен остановить на месте.
</div>
</div>
</div>

<div class="archive-panel" style="background-image: url('https://upforme.ru/uploads/001b/d9/4a/859/879074.png'); --clr: #78b0c9; --clr-glow: rgba(120,176,201,0.5);">
<div class="panel-vertical-title">Лирика</div>
<div class="panel-content">
<div class="c-stamp">Химера</div>
<h2 class="c-title">Lirika</h2>
<div class="c-subtitle">Младшая горничная</div>

<div class="c-desc">Самая младшая и неуклюжая из горничных. Очаровательная девушка с копной бирюзовых волос и огромными невинными глазами. Вечно витает в облаках.</div>

<div class="c-stats">
<div class="c-stat-item"><span class="c-stat-label">Природа</span><span class="c-stat-val">Химера</span></div>
<div class="c-stat-item"><span class="c-stat-label">Сила</span><span class="c-stat-val">Сверхчеловеческая</span></div>
</div>

<div class="c-feature">
<strong style="display:block; margin-bottom: 5px; font-family: Arial; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #78b0c9;">Способность: Сила</strong>
За дурашливой внешностью скрыта нечеловеческая сила. С лёгкостью передвигает рояли и носит стопки посуды. Любит сладкое.
</div>
</div>
</div>

<div class="archive-panel" style="background-image: url('https://upforme.ru/uploads/001b/d9/4a/859/42617.png'); --clr: #ff6b35; --clr-glow: rgba(255,107,53,0.5);">
<div class="panel-vertical-title">Сага</div>
<div class="panel-content">
<div class="c-stamp">Химера</div>
<h2 class="c-title">Saga</h2>
<div class="c-subtitle">Огненная горничная</div>

<div class="c-desc">Воплощение хаоса и неудержимой энергии. Рыжеволосая бестия с хитрой клыкастой улыбкой и вечным огнём в зелёных глазах. Самая безрассудная.</div>

<div class="c-stats">
<div class="c-stat-item"><span class="c-stat-label">Природа</span><span class="c-stat-val">Химера</span></div>
<div class="c-stat-item"><span class="c-stat-label">Характер</span><span class="c-stat-val">Безрассудная</span></div>
</div>

<div class="c-feature">
<strong style="display:block; margin-bottom: 5px; font-family: Arial; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #ff6b35;">Способность: Регенерация</strong>
Кровь химеры дарует невероятную регенерацию и метаболизм. Любая рана — досадное недоразумение. Живёт на полной скорости.
</div>
</div>
</div>

<div class="archive-panel" style="background-image: url('https://upforme.ru/uploads/001b/d9/4a/859/95856.jpg'); --clr: #d4a84a; --clr-glow: rgba(212,168,74,0.5);">
<div class="panel-vertical-title">Канон</div>
<div class="panel-content">
<div class="c-stamp">Химера</div>
<h2 class="c-title">Canon</h2>
<div class="c-subtitle">Педантичная горничная</div>

<div class="c-desc">Воплощение порядка и невозмутимого спокойствия. Строгая, утончённая и педантичная. Длинная чёрная коса и очки придают вид эрудированного библиотекаря.</div>

<div class="c-stats">
<div class="c-stat-item"><span class="c-stat-label">Природа</span><span class="c-stat-val">Химера</span></div>
<div class="c-stat-item"><span class="c-stat-label">Защита</span><span class="c-stat-val">Неуязвимость</span></div>
</div>

<div class="c-feature">
<strong style="display:block; margin-bottom: 5px; font-family: Arial; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #d4a84a;">Способность: Абсолютная Защита</strong>
Наследие химеры делает её настоящей крепостью. Даже острый осколок не оставит царапины на идеальной коже.
</div>
</div>
</div>

<div class="archive-panel" style="background-image: url('https://upforme.ru/uploads/001b/d9/4a/859/425356.jpg'); --clr: #90c090; --clr-glow: rgba(144,192,144,0.5);">
<div class="panel-vertical-title">Мира</div>
<div class="panel-content">
<div class="c-stamp">Фамильяр</div>
<h2 class="c-title">Mira</h2>
<div class="c-subtitle">Хранитель тайн</div>

<div class="c-desc">Тишайшая обитательница поместья. На первый взгляд — изящная серебряная лисичка с умными изумрудными глазами. Но в глубине таится мудрость веков.</div>

<div class="c-stats">
<div class="c-stat-item"><span class="c-stat-label">Форма</span><span class="c-stat-val">Серебряная лиса</span></div>
<div class="c-stat-item"><span class="c-stat-label">Сущность</span><span class="c-stat-val">Дух знаний</span></div>
</div>

<div class="c-feature">
<strong style="display:block; margin-bottom: 5px; font-family: Arial; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #90c090;">Тайна: Мираж</strong>
На шее покоится таинственная подвеска — ключ к истинной натуре. Мира — мираж, физическая оболочка для души магессы.
</div>
</div>
</div>

<div class="archive-panel" style="background-image: url('https://upforme.ru/uploads/001b/d9/4a/859/326131.jpg'); border-color: rgba(192,96,208,0.5); --clr: #c060d0; --clr-glow: rgba(192,96,208,0.8);">
<div class="panel-vertical-title" style="color: #c060d0; text-shadow: 0 0 10px #c060d0;">НОКТА</div>
<div class="panel-content">
<div class="c-stamp" style="color: #e5b3f0; text-shadow: 0 0 5px #c060d0;">СУЩНОСТЬ</div>
<h2 class="c-title" style="color: #f0d0f8;">Nocta</h2>
<div class="c-subtitle">Голос Скверны</div>

<div class="c-desc" style="border-color: #c060d0; background: linear-gradient(90deg, rgba(192,96,208,0.1), transparent);">Живое воплощение неудачного эксперимента. Абстрактное существо, поселившееся в голове Эребуса после инцидента на исследовательской вылазке.</div>

<div class="c-stats">
<div class="c-stat-item" style="border-color: rgba(192,96,208,0.3);"><span class="c-stat-label" style="color:#c060d0;">Природа</span><span class="c-stat-val">Скверна</span></div>
<div class="c-stat-item" style="border-color: rgba(192,96,208,0.3);"><span class="c-stat-label" style="color:#c060d0;">Форма</span><span class="c-stat-val">Нематериальна</span></div>
</div>

<div class="c-feature" style="border-color: #c060d0; box-shadow: inset 0 0 20px rgba(192,96,208,0.2);">
<strong style="display:block; margin-bottom: 5px; font-family: Arial; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #e5b3f0;">⚠ Внимание: Ментальное загрязнение</strong>
Вязкая структура живого яда, который льётся прямо в сердце молодого алхимика. Совокупность искажённых личностей.
</div>
</div>
</div>

</div>
</div>
[/html]

Поделиться62026-03-24 09:38:24

Автор: Paradox
Пришёл, увидел, закурил
Сообщений: 124

[html]
<style>
/* === БАЗА ФЕНТЕЗИ ДИЗАЙНА === */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400&family=Underdog&display=swap');

.alch-game-wrapper {
width: 100%; max-width: 800px; margin: 20px auto;
background: #1a1513;
background-image: repeating-linear-gradient(45deg, rgba(20,15,10,0.5) 25%, transparent 25%, transparent 75%, rgba(20,15,10,0.5) 75%, rgba(20,15,10,0.5)),
repeating-linear-gradient(45deg, rgba(20,15,10,0.5) 25%, #1a1513 25%, #1a1513 75%, rgba(20,15,10,0.5) 75%, rgba(20,15,10,0.5));
background-position: 0 0, 10px 10px; background-size: 20px 20px;
padding: 30px; box-sizing: border-box;
font-family: 'Cormorant Garamond', serif; color: #d8c3a5;
border: 3px solid #4a3424; border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 50px rgba(0,0,0,0.8);
position: relative;
}

/* Заголовки */
.alch-header { text-align: center; margin-bottom: 25px; border-bottom: 2px dashed #4a3424; padding-bottom: 15px; }
.alch-title { font-family: 'Underdog', cursive; font-size: 36px; color: #e9b872; text-shadow: 2px 2px 5px #000; margin: 0 0 5px 0; }
.alch-subtitle { font-style: italic; color: #8c7b68; margin: 0; font-size: 16px; }

/* === СКРЫТЫЙ CSS ДВИЖОК === */
.alch-engine { display: none; }

/* === ПАНЕЛИ === */
.alch-flex { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; margin-bottom: 25px; }
.alch-panel {
flex: 1; min-width: 280px; background: rgba(10, 5, 5, 0.8);
border: 1px solid #3a261a; border-radius: 5px; padding: 20px;
box-shadow: inset 0 0 15px rgba(0,0,0,0.9); text-align: center;
}
.alch-panel h3 { margin: 0 0 15px 0; color: #c9a66b; border-bottom: 1px solid #3a261a; padding-bottom: 5px; font-family: 'Underdog', cursive; font-size: 22px; }

/* === ПОЛКА: КНОПКИ ИНГРЕДИЕНТОВ === */
.alch-shelf { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.alch-btn {
display: inline-block; background: #2a1e16; color: #bcaaa4; border: 1px solid #5a4230;
padding: 8px 12px; cursor: pointer; border-radius: 4px; font-family: inherit; font-size: 16px;
transition: all 0.2s ease; user-select: none;
}
.alch-btn:hover { background: #4a3424; color: #fff; box-shadow: 0 0 10px #8c6b4a; }

/* Логика нажатых кнопок на полке */
#a1:checked ~ .alch-board .btn-1, #a2:checked ~ .alch-board .btn-2,
#a3:checked ~ .alch-board .btn-3, #a4:checked ~ .alch-board .btn-4,
#a5:checked ~ .alch-board .btn-5, #a6:checked ~ .alch-board .btn-6,
#a7:checked ~ .alch-board .btn-7 {
background: #5c6bc0; color: #fff; border-color: #8c9eff; box-shadow: 0 0 15px rgba(92,107,192,0.6);
}

/* === КОТЕЛ === */
.alch-cauldron {
min-height: 100px; background: #050403; border: 3px solid #111; border-radius: 50% / 20px;
padding: 20px 10px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
box-shadow: 0 15px 20px rgba(0,0,0,0.9), inset 0 -20px 30px rgba(76, 175, 80, 0.15);
}
.alch-in-pot { display: none; background: rgba(76, 175, 80, 0.2); border: 1px solid #4CAF50; color: #aed581; padding: 4px 10px; border-radius: 12px; font-size: 14px; }
.alch-empty-msg { color: #665; font-style: italic; font-size: 15px; }

/* Появление ингредиентов в котле */
#a1:checked ~ .alch-board .pot-1, #a2:checked ~ .alch-board .pot-2,
#a3:checked ~ .alch-board .pot-3, #a4:checked ~ .alch-board .pot-4,
#a5:checked ~ .alch-board .pot-5, #a6:checked ~ .alch-board .pot-6,
#a7:checked ~ .alch-board .pot-7 { display: inline-block; }

/* Скрытие надписи "Пусто", если хоть что-то выбрано */
#a1:checked ~ .alch-board .alch-empty-msg, #a2:checked ~ .alch-board .alch-empty-msg,
#a3:checked ~ .alch-board .alch-empty-msg, #a4:checked ~ .alch-board .alch-empty-msg,
#a5:checked ~ .alch-board .alch-empty-msg, #a6:checked ~ .alch-board .alch-empty-msg,
#a7:checked ~ .alch-board .alch-empty-msg { display: none; }

/* === ПАНЕЛЬ РЕЗУЛЬТАТОВ (РЕЦЕПТЫ) === */
.alch-result-box {
position: relative; border: 2px dashed #4a3424; background: rgba(0,0,0,0.6);
padding: 25px 20px; min-height: 100px; text-align: center; border-radius: 5px;
display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.alch-default-text { font-size: 17px; color: #8c7b68; transition: 0.3s; }

.alch-recipe {
position: absolute; inset: 0; background: #0a0807; display: flex; flex-direction: column;
align-items: center; justify-content: center; padding: 20px;
opacity: 0; z-index: -1; transition: opacity 0.5s ease;
}
.alch-recipe-title { font-family: 'Underdog', cursive; font-size: 26px; color: #aed581; margin-bottom: 10px; text-shadow: 1px 1px 3px #000; }
.alch-recipe-desc { font-size: 17px; color: #e8dcc4; line-height: 1.4; max-width: 650px; }

/* === ЛОГИКА СМЕШИВАНИЯ (20 ЗЕЛИЙ) === */
/* Формула: #a[X]:checked ~ #a[Y]:checked ~ #a[Z]:checked ~ .alch-board .rec-[XYZ] */

/* 1-2-3 */ #a1:checked ~ #a2:checked ~ #a3:checked ~ .alch-board .rec-123 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 1-2-4 */ #a1:checked ~ #a2:checked ~ #a4:checked ~ .alch-board .rec-124 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 1-2-5 */ #a1:checked ~ #a2:checked ~ #a5:checked ~ .alch-board .rec-125 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 1-2-6 */ #a1:checked ~ #a2:checked ~ #a6:checked ~ .alch-board .rec-126 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 1-3-4 */ #a1:checked ~ #a3:checked ~ #a4:checked ~ .alch-board .rec-134 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 1-3-5 */ #a1:checked ~ #a3:checked ~ #a5:checked ~ .alch-board .rec-135 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 1-3-6 */ #a1:checked ~ #a3:checked ~ #a6:checked ~ .alch-board .rec-136 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 1-4-5 */ #a1:checked ~ #a4:checked ~ #a5:checked ~ .alch-board .rec-145 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 1-4-7 */ #a1:checked ~ #a4:checked ~ #a7:checked ~ .alch-board .rec-147 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 1-5-7 */ #a1:checked ~ #a5:checked ~ #a7:checked ~ .alch-board .rec-157 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 2-3-4 */ #a2:checked ~ #a3:checked ~ #a4:checked ~ .alch-board .rec-234 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 2-3-5 */ #a2:checked ~ #a3:checked ~ #a5:checked ~ .alch-board .rec-235 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 2-4-5 */ #a2:checked ~ #a4:checked ~ #a5:checked ~ .alch-board .rec-245 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 2-5-6 */ #a2:checked ~ #a5:checked ~ #a6:checked ~ .alch-board .rec-256 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 2-6-7 */ #a2:checked ~ #a6:checked ~ #a7:checked ~ .alch-board .rec-267 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 3-4-6 */ #a3:checked ~ #a4:checked ~ #a6:checked ~ .alch-board .rec-346 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 3-5-7 */ #a3:checked ~ #a5:checked ~ #a7:checked ~ .alch-board .rec-357 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 4-5-6 */ #a4:checked ~ #a5:checked ~ #a6:checked ~ .alch-board .rec-456 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 4-6-7 */ #a4:checked ~ #a6:checked ~ #a7:checked ~ .alch-board .rec-467 { opacity: 1; z-index: 10; border: 1px solid #aed581; }
/* 5-6-7 */ #a5:checked ~ #a6:checked ~ #a7:checked ~ .alch-board .rec-567 { opacity: 1; z-index: 10; border: 1px solid #aed581; }

</style>

<input type="checkbox" id="a1" class="alch-engine">
<input type="checkbox" id="a2" class="alch-engine">
<input type="checkbox" id="a3" class="alch-engine">
<input type="checkbox" id="a4" class="alch-engine">
<input type="checkbox" id="a5" class="alch-engine">
<input type="checkbox" id="a6" class="alch-engine">
<input type="checkbox" id="a7" class="alch-engine">

<div class="alch-board">

<div class="alch-header">
<h1 class="alch-title">Котелок Безумного Алхимика</h1>
<p class="alch-subtitle">Смешайте <b>ровно 3 реагента</b>. Чтобы достать реагент из котла, кликните по нему на полке еще раз.</p>
</div>

<div class="alch-flex">


<div class="alch-panel">
<h3>Полки с реагентами</h3>
<div class="alch-shelf">
<label for="a1" class="alch-btn btn-1">Корень мандрагоры</label>
<label for="a2" class="alch-btn btn-2">Эссенция ветра</label>
<label for="a3" class="alch-btn btn-3">Вулканическая крошка</label>
<label for="a4" class="alch-btn btn-4">Слёзы единорога</label>
<label for="a5" class="alch-btn btn-5">Пыль фей</label>
<label for="a6" class="alch-btn btn-6">Слизь тролля</label>
<label for="a7" class="alch-btn btn-7">Лунный гриб</label>
</div>
</div>

<div class="alch-panel">
<h3>Бурлящий котел</h3>
<div class="alch-cauldron">
<span class="alch-empty-msg">Котел пока пуст...</span>
<span class="alch-in-pot pot-1">Мандрагора</span>
<span class="alch-in-pot pot-2">Эссенция ветра</span>
<span class="alch-in-pot pot-3">Вулканическая крошка</span>
<span class="alch-in-pot pot-4">Слёзы единорога</span>
<span class="alch-in-pot pot-5">Пыль фей</span>
<span class="alch-in-pot pot-6">Слизь тролля</span>
<span class="alch-in-pot pot-7">Лунный гриб</span>
</div>
</div>

</div>

<div class="alch-result-box">


<div class="alch-default-text">
Внимательно выберите три ингредиента на полке.<br>
<span style="font-size: 14px; opacity: 0.7;">(Если выбрать больше трёх, магия может сбоить. Будьте точны!)</span>
</div>

<div class="alch-recipe rec-123">
<div class="alch-recipe-title">Зелье истошного ора 📢</div>
<div class="alch-recipe-desc">Орите на здоровье, вам нужнее! Идеально подходит для общения с глухими некромантами, начальством и просто чтобы сбросить стресс.</div>
</div>

<div class="alch-recipe rec-124">
<div class="alch-recipe-title">Свист печального суслика 🐿️</div>
<div class="alch-recipe-desc">Каждый раз, когда вы пытаетесь заговорить, из вашего рта вырывается жалобный, пронзительный свист. Враги плачут от жалости к вам.</div>
</div>

<div class="alch-recipe rec-125">
<div class="alch-recipe-title">Торнадо в носу 🌪️</div>
<div class="alch-recipe-desc">Вы чихаете с такой силой, что сдуваете мебель. Урон по площади: 5 метров. Шанс высморкать собственную гордость: 100%.</div>
</div>

<div class="alch-recipe rec-126">
<div class="alch-recipe-title">Летающие сопли 🦠</div>
<div class="alch-recipe-desc">Зелье наделяет ваши биологические жидкости антигравитацией. Выглядит омерзительно, зато можно не пользоваться платком.</div>
</div>

<div class="alch-recipe rec-134">
<div class="alch-recipe-title">Паровой чайник 🫖</div>
<div class="alch-recipe-desc">Из ваших ушей валит густой пар, а при ходьбе вы издаете характерный свист закипающей воды. Отличная маскировка на кухне.</div>
</div>

<div class="alch-recipe rec-135">
<div class="alch-recipe-title">Искрящийся гнев ⚡</div>
<div class="alch-recipe-desc">Вы так злы, что буквально бьете всех током при прикосновении. Идеально для тех, кто не любит обнимашки.</div>
</div>

<div class="alch-recipe rec-136">
<div class="alch-recipe-title">Отвар огненной отрыжки 🔥</div>
<div class="alch-recipe-desc">Осторожно: не применять в библиотеках и деревянных тавернах! Послевкусие жженой резины и легкая изжога гарантированы.</div>
</div>

<div class="alch-recipe rec-145">
<div class="alch-recipe-title">Слеза драматичного злодея 🎭</div>
<div class="alch-recipe-desc">Вызывает непреодолимое желание толкать длинные пафосные речи перед тем, как добить врага. Враг обычно успевает уйти.</div>
</div>

<div class="alch-recipe rec-147">
<div class="alch-recipe-title">Унылый галлюциноген 🍄</div>
<div class="alch-recipe-desc">Вы видите розовых слоников, но они плачут и жалуются вам на ипотеку. Настроение испорчено на весь день.</div>
</div>

<div class="alch-recipe rec-157">
<div class="alch-recipe-title">Светящаяся перхоть ✨</div>
<div class="alch-recipe-desc">Ваша голова теперь работает как диско-шар. Стелс-миссии отменяются, зато на вечеринке вы звезда.</div>
</div>

<div class="alch-recipe rec-234">
<div class="alch-recipe-title">Гейзер меланхолии 💧</div>
<div class="alch-recipe-desc">Вы плачете так сильно, что способны потушить небольшой пожар. Удобно в быту, неудобно в бою.</div>
</div>

<div class="alch-recipe rec-235">
<div class="alch-recipe-title">Буря в стакане 🌪️</div>
<div class="alch-recipe-desc">Любая жидкость, к которой вы прикасаетесь, начинает бурлить и вращаться. Пить пиво теперь крайне проблематично.</div>
</div>

<div class="alch-recipe rec-245">
<div class="alch-recipe-title">Зелье левитации табуреток 🪑</div>
<div class="alch-recipe-desc">Вы не взлетите, но вот вся мебель вокруг вас... Медленно поднимется к потолку. Берегите голову при окончании эффекта!</div>
</div>

<div class="alch-recipe rec-256">
<div class="alch-recipe-title">Липкий ветерок 💨</div>
<div class="alch-recipe-desc">Вы выдыхаете воздух, который склеивает предметы. Полезно для ремонта ваз, ужасно для романтических поцелуев.</div>
</div>

<div class="alch-recipe rec-267">
<div class="alch-recipe-title">Грибной парашют 🍄</div>
<div class="alch-recipe-desc">При падении с высоты из вашей спины вырастает гигантский мягкий гриб. Выглядит глупо, но кости целы.</div>
</div>

<div class="alch-recipe rec-346">
<div class="alch-recipe-title">Варево жидких костей 🦴</div>
<div class="alch-recipe-desc">Поздравляем, теперь вы можете пролезть под дверью! Правда, обратно собраться в человека будет очень сложно.</div>
</div>

<div class="alch-recipe rec-357">
<div class="alch-recipe-title">Лавовая жвачка 🌋</div>
<div class="alch-recipe-desc">Вы можете надувать пузыри из магмы. Пузыри лопаются с оглушительным взрывом. Не проглатывать!</div>
</div>

<div class="alch-recipe rec-456">
<div class="alch-recipe-title">Эликсир внезапной блестковости ✨</div>
<div class="alch-recipe-desc">Вместо крови у вас теперь глиттер, а при ранении вы выглядите как взорвавшаяся хлопушка. Враги в замешательстве.</div>
</div>

<div class="alch-recipe rec-467">
<div class="alch-recipe-title">Жабий хор 🐸</div>
<div class="alch-recipe-desc">Каждое ваше слово сопровождается громким кваканьем, эхом раздающимся из желудка. Отлично для отпугивания комаров.</div>
</div>

<div class="alch-recipe rec-567">
<div class="alch-recipe-title">Болотный светлячок 💡</div>
<div class="alch-recipe-desc">Вы светитесь мягким зеленым светом и пахнете тиной. Местные лягушки признают вас своим божеством.</div>
</div>

</div>
</div>
</div>
[/html]

Поделиться72026-03-24 10:22:50

Автор: Paradox
Пришёл, увидел, закурил
Сообщений: 124

[html]
<style>
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,700;1,400&display=swap');

.ea-wrapper {
width: 100%; max-width: 850px; margin: 20px auto;
background: radial-gradient(circle at top right, #0d221c, #070d0b 70%);
padding: 40px; box-sizing: border-box;
font-family: 'Cormorant Garamond', serif; color: #d4e0eb;
border: 1px solid #b69d65; border-radius: 12px;
box-shadow: 0 15px 40px rgba(0,0,0,0.9), inset 0 0 60px rgba(136, 255, 209, 0.05);
position: relative; overflow: hidden;
}
.ea-wrapper::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background-image: radial-gradient(circle, rgba(182, 157, 101, 0.1) 1px, transparent 1px);
background-size: 30px 30px; z-index: 0; pointer-events: none; opacity: 0.5;
}
.ea-header { text-align: center; margin-bottom: 30px; position: relative; z-index: 1; }
.ea-title {
font-family: 'Cinzel Decorative', serif; font-size: 38px; color: #e6d596;
margin: 0 0 10px 0; font-weight: 400; letter-spacing: 2px;
text-shadow: 0 0 15px rgba(230, 213, 150, 0.3);
}
.ea-subtitle { font-style: italic; color: #8a9e95; margin: 0; font-size: 17px; }
.ea-divider { margin: 15px auto; width: 60%; height: 1px; background: linear-gradient(90deg, transparent, #b69d65, transparent); position: relative; }
.ea-divider::after { content: "✧ ✦ ✧"; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); color: #b69d65; background: #070d0b; padding: 0 10px; font-size: 14px; letter-spacing: 4px; }
.ea-engine { display: none; }
.ea-flex { display: flex; flex-wrap: wrap; gap: 25px; justify-content: space-between; margin-bottom: 25px; position: relative; z-index: 1; }
.ea-panel {
flex: 1; min-width: 280px;
background: linear-gradient(180deg, rgba(13, 34, 28, 0.6), rgba(7, 13, 11, 0.9));
border: 1px solid rgba(182, 157, 101, 0.3); border-radius: 8px; padding: 25px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.8); text-align: center; position: relative;
}
.ea-panel h3 { margin: 0 0 20px 0; color: #b69d65; font-family: 'Cinzel Decorative', serif; font-size: 20px; letter-spacing: 1px; }
.ea-shelf { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ea-btn {
display: inline-block; background: rgba(10, 20, 15, 0.8); color: #a9bdbc;
border: 1px solid #3c5448; padding: 8px 16px; cursor: pointer;
border-radius: 20px; font-family: inherit; font-size: 15px; transition: all 0.4s ease;
user-select: none; letter-spacing: 0.5px;
}
.ea-btn:hover { background: rgba(30, 56, 46, 0.8); border-color: #b69d65; color: #fff; box-shadow: 0 0 15px rgba(182, 157, 101, 0.3); }
#ea1:checked ~ .ea-board .btn-1, #ea2:checked ~ .ea-board .btn-2,
#ea3:checked ~ .ea-board .btn-3, #ea4:checked ~ .ea-board .btn-4,
#ea5:checked ~ .ea-board .btn-5, #ea6:checked ~ .ea-board .btn-6,
#ea7:checked ~ .ea-board .btn-7, #ea8:checked ~ .ea-board .btn-8,
#ea9:checked ~ .ea-board .btn-9, #ea10:checked ~ .ea-board .btn-10,
#ea11:checked ~ .ea-board .btn-11, #ea12:checked ~ .ea-board .btn-12,
#ea13:checked ~ .ea-board .btn-13, #ea14:checked ~ .ea-board .btn-14,
#ea15:checked ~ .ea-board .btn-15, #ea16:checked ~ .ea-board .btn-16,
#ea17:checked ~ .ea-board .btn-17, #ea18:checked ~ .ea-board .btn-18,
#ea19:checked ~ .ea-board .btn-19, #ea20:checked ~ .ea-board .btn-20 {
background: rgba(182, 157, 101, 0.15); color: #e6d596; border-color: #e6d596;
box-shadow: 0 0 20px rgba(230, 213, 150, 0.4), inset 0 0 10px rgba(230, 213, 150, 0.2);
}
@keyframes moonwellPulse { 0%, 100% { box-shadow: inset 0 0 30px rgba(136, 255, 209, 0.05), 0 15px 30px rgba(0,0,0,0.8); } 50% { box-shadow: inset 0 0 50px rgba(136, 255, 209, 0.2), 0 15px 30px rgba(0,0,0,0.8); border-color: #5abda0; } }
.ea-cauldron {
min-height: 100px; background: radial-gradient(circle at center, #0a1f18 0%, #030806 80%);
border: 1px solid #3c5448; border-radius: 50% / 15px;
padding: 20px 15px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
animation: moonwellPulse 5s infinite ease-in-out;
}
.ea-in-pot { display: none; color: #88ffd1; font-style: italic; font-size: 16px; border-bottom: 1px dotted #88ffd1; padding-bottom: 2px; text-shadow: 0 0 8px rgba(136, 255, 209, 0.5); }
.ea-empty-msg { color: #526e63; font-style: italic; font-size: 15px; letter-spacing: 1px; }
#ea1:checked ~ .ea-board .pot-1, #ea2:checked ~ .ea-board .pot-2,
#ea3:checked ~ .ea-board .pot-3, #ea4:checked ~ .ea-board .pot-4,
#ea5:checked ~ .ea-board .pot-5, #ea6:checked ~ .ea-board .pot-6,
#ea7:checked ~ .ea-board .pot-7, #ea8:checked ~ .ea-board .pot-8,
#ea9:checked ~ .ea-board .pot-9, #ea10:checked ~ .ea-board .pot-10,
#ea11:checked ~ .ea-board .pot-11, #ea12:checked ~ .ea-board .pot-12,
#ea13:checked ~ .ea-board .pot-13, #ea14:checked ~ .ea-board .pot-14,
#ea15:checked ~ .ea-board .pot-15, #ea16:checked ~ .ea-board .pot-16,
#ea17:checked ~ .ea-board .pot-17, #ea18:checked ~ .ea-board .pot-18,
#ea19:checked ~ .ea-board .pot-19, #ea20:checked ~ .ea-board .pot-20 { display: inline-block; }
#ea1:checked ~ .ea-board .ea-empty-msg, #ea2:checked ~ .ea-board .ea-empty-msg,
#ea3:checked ~ .ea-board .ea-empty-msg, #ea4:checked ~ .ea-board .ea-empty-msg,
#ea5:checked ~ .ea-board .ea-empty-msg, #ea6:checked ~ .ea-board .ea-empty-msg,
#ea7:checked ~ .ea-board .ea-empty-msg, #ea8:checked ~ .ea-board .ea-empty-msg,
#ea9:checked ~ .ea-board .ea-empty-msg, #ea10:checked ~ .ea-board .ea-empty-msg,
#ea11:checked ~ .ea-board .ea-empty-msg, #ea12:checked ~ .ea-board .ea-empty-msg,
#ea13:checked ~ .ea-board .ea-empty-msg, #ea14:checked ~ .ea-board .ea-empty-msg,
#ea15:checked ~ .ea-board .ea-empty-msg, #ea16:checked ~ .ea-board .ea-empty-msg,
#ea17:checked ~ .ea-board .ea-empty-msg, #ea18:checked ~ .ea-board .ea-empty-msg,
#ea19:checked ~ .ea-board .ea-empty-msg, #ea20:checked ~ .ea-board .ea-empty-msg { display: none; }
.ea-actions { text-align: center; position: relative; z-index: 10; margin-bottom: 20px; min-height: 50px; }
.ea-brew-btn {
display: inline-block; background: linear-gradient(180deg, #183d2e, #0a1712);
color: #e6d596; font-family: 'Cinzel Decorative', serif; font-size: 20px;
padding: 12px 35px; border: 2px solid #b69d65; border-radius: 30px;
cursor: pointer; letter-spacing: 2px; transition: 0.3s;
box-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 0 0 10px rgba(182, 157, 101, 0.2);
}
.ea-brew-btn:hover { background: linear-gradient(180deg, #22523e, #183d2e); box-shadow: 0 5px 25px rgba(182, 157, 101, 0.4), inset 0 0 15px rgba(182, 157, 101, 0.5); }
.ea-reset-btn {
display: none; background: linear-gradient(180deg, #3d1818, #170a0a);
color: #e69696; font-family: 'Cinzel Decorative', serif; font-size: 20px;
padding: 12px 35px; border: 2px solid #b66565; border-radius: 30px;
cursor: pointer; letter-spacing: 2px; transition: 0.3s;
box-shadow: 0 5px 15px rgba(0,0,0,0.8), inset 0 0 10px rgba(182, 101, 101, 0.2);
}
.ea-reset-btn:hover { background: linear-gradient(180deg, #522222, #3d1818); color: #fff; box-shadow: 0 5px 25px rgba(182, 101, 101, 0.4); }
#ea-brew:checked ~ .ea-board .ea-actions .ea-brew-btn { display: none; }
#ea-brew:checked ~ .ea-board .ea-actions .ea-reset-btn { display: inline-block; }
#ea-brew:checked ~ .ea-board .ea-flex .ea-shelf { pointer-events: none; opacity: 0.5; filter: grayscale(100%); }
.ea-result-box {
position: relative; background: rgba(5, 10, 8, 0.9); border: 1px solid rgba(182, 157, 101, 0.4);
border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.5);
display: none; align-items: center; justify-content: center; overflow: hidden;
z-index: 1; padding: 30px 20px; text-align: center; margin-bottom: 20px; min-height: 120px;
}
#ea-brew:checked ~ .ea-board .ea-result-box { display: flex; flex-direction: column; }
.ea-recipe {
position: absolute; inset: 0; background: radial-gradient(circle, #0a1712 0%, #030806 100%);
display: none; flex-direction: column; align-items: center; justify-content: center; padding: 20px;
opacity: 0; z-index: 1; transition: opacity 0.5s ease;
}
.ea-recipe-title { font-family: 'Cinzel Decorative', serif; font-size: 26px; color: #88ffd1; margin-bottom: 12px; text-shadow: 0 0 15px rgba(136, 255, 209, 0.4); }
.ea-recipe-desc { font-size: 18px; color: #c4d4cc; line-height: 1.5; max-width: 650px; }
.ea-fallback { opacity: 1; z-index: 5; display: flex !important; }
.ea-fallback .ea-recipe-title { color: #8f746b; text-shadow: none; }
/* РЕЦЕПТЫ (50 штук) */
#ea1:checked ~ #ea2:checked ~ #ea-brew:checked ~ .ea-board .rec-12,
#ea1:checked ~ #ea3:checked ~ #ea-brew:checked ~ .ea-board .rec-13,
#ea1:checked ~ #ea4:checked ~ #ea-brew:checked ~ .ea-board .rec-14,
#ea1:checked ~ #ea5:checked ~ #ea-brew:checked ~ .ea-board .rec-15,
#ea1:checked ~ #ea6:checked ~ #ea-brew:checked ~ .ea-board .rec-16,
#ea1:checked ~ #ea7:checked ~ #ea-brew:checked ~ .ea-board .rec-17,
#ea1:checked ~ #ea8:checked ~ #ea-brew:checked ~ .ea-board .rec-18,
#ea1:checked ~ #ea9:checked ~ #ea-brew:checked ~ .ea-board .rec-19,
#ea1:checked ~ #ea10:checked ~ #ea-brew:checked ~ .ea-board .rec-1-10,
#ea2:checked ~ #ea3:checked ~ #ea-brew:checked ~ .ea-board .rec-23,
#ea2:checked ~ #ea4:checked ~ #ea-brew:checked ~ .ea-board .rec-24,
#ea2:checked ~ #ea5:checked ~ #ea-brew:checked ~ .ea-board .rec-25,
#ea2:checked ~ #ea6:checked ~ #ea-brew:checked ~ .ea-board .rec-26,
#ea2:checked ~ #ea7:checked ~ #ea-brew:checked ~ .ea-board .rec-27,
#ea2:checked ~ #ea8:checked ~ #ea-brew:checked ~ .ea-board .rec-28,
#ea2:checked ~ #ea9:checked ~ #ea-brew:checked ~ .ea-board .rec-29,
#ea2:checked ~ #ea10:checked ~ #ea-brew:checked ~ .ea-board .rec-2-10,
#ea3:checked ~ #ea4:checked ~ #ea-brew:checked ~ .ea-board .rec-34,
#ea3:checked ~ #ea5:checked ~ #ea-brew:checked ~ .ea-board .rec-35,
#ea3:checked ~ #ea6:checked ~ #ea-brew:checked ~ .ea-board .rec-36,
#ea3:checked ~ #ea7:checked ~ #ea-brew:checked ~ .ea-board .rec-37,
#ea3:checked ~ #ea8:checked ~ #ea-brew:checked ~ .ea-board .rec-38,
#ea3:checked ~ #ea9:checked ~ #ea-brew:checked ~ .ea-board .rec-39,
#ea3:checked ~ #ea10:checked ~ #ea-brew:checked ~ .ea-board .rec-3-10,
#ea4:checked ~ #ea5:checked ~ #ea-brew:checked ~ .ea-board .rec-45,
#ea4:checked ~ #ea6:checked ~ #ea-brew:checked ~ .ea-board .rec-46,
#ea4:checked ~ #ea7:checked ~ #ea-brew:checked ~ .ea-board .rec-47,
#ea4:checked ~ #ea8:checked ~ #ea-brew:checked ~ .ea-board .rec-48,
#ea4:checked ~ #ea9:checked ~ #ea-brew:checked ~ .ea-board .rec-49,
#ea4:checked ~ #ea10:checked ~ #ea-brew:checked ~ .ea-board .rec-4-10,
#ea5:checked ~ #ea6:checked ~ #ea-brew:checked ~ .ea-board .rec-56,
#ea5:checked ~ #ea7:checked ~ #ea-brew:checked ~ .ea-board .rec-57,
#ea5:checked ~ #ea8:checked ~ #ea-brew:checked ~ .ea-board .rec-58,
#ea5:checked ~ #ea9:checked ~ #ea-brew:checked ~ .ea-board .rec-59,
#ea5:checked ~ #ea10:checked ~ #ea-brew:checked ~ .ea-board .rec-5-10,
#ea6:checked ~ #ea7:checked ~ #ea-brew:checked ~ .ea-board .rec-67,
#ea6:checked ~ #ea8:checked ~ #ea-brew:checked ~ .ea-board .rec-68,
#ea6:checked ~ #ea9:checked ~ #ea-brew:checked ~ .ea-board .rec-69,
#ea6:checked ~ #ea10:checked ~ #ea-brew:checked ~ .ea-board .rec-6-10,
#ea7:checked ~ #ea8:checked ~ #ea-brew:checked ~ .ea-board .rec-78,
#ea7:checked ~ #ea9:checked ~ #ea-brew:checked ~ .ea-board .rec-79,
#ea7:checked ~ #ea10:checked ~ #ea-brew:checked ~ .ea-board .rec-7-10,
#ea8:checked ~ #ea9:checked ~ #ea-brew:checked ~ .ea-board .rec-89,
#ea8:checked ~ #ea10:checked ~ #ea-brew:checked ~ .ea-board .rec-8-10,
#ea9:checked ~ #ea10:checked ~ #ea-brew:checked ~ .ea-board .rec-9-10,
#ea11:checked ~ #ea12:checked ~ #ea-brew:checked ~ .ea-board .rec-1112,
#ea13:checked ~ #ea14:checked ~ #ea-brew:checked ~ .ea-board .rec-1314,
#ea15:checked ~ #ea16:checked ~ #ea-brew:checked ~ .ea-board .rec-1516,
#ea17:checked ~ #ea18:checked ~ #ea-brew:checked ~ .ea-board .rec-1718,
#ea19:checked ~ #ea20:checked ~ #ea-brew:checked ~ .ea-board .rec-1920 {
opacity: 1; z-index: 10; display: flex; border: 1px solid #88ffd1;
}
</style>

<div class="ea-board">
<div class="ea-header">
<h1 class="ea-title">Тайны Лунного Колодца</h1>
<div class="ea-divider"></div>
<p class="ea-subtitle">Выберите <b>ровно 2 ингредиента</b> и нажмите «Смешать эссенцию».</p>
</div>

<div class="ea-flex">
<div class="ea-panel">
<h3>Амулеты Ингредиентов</h3>
<div class="ea-shelf">
<label for="ea1" class="ea-btn btn-1">Корень мандрагоры</label>
<label for="ea2" class="ea-btn btn-2">Эссенция ветра</label>
<label for="ea3" class="ea-btn btn-3">Вулканическая крошка</label>
<label for="ea4" class="ea-btn btn-4">Слёзы единорога</label>
<label for="ea5" class="ea-btn btn-5">Пыль фей</label>
<label for="ea6" class="ea-btn btn-6">Слизь тролля</label>
<label for="ea7" class="ea-btn btn-7">Лунный гриб</label>
<label for="ea8" class="ea-btn btn-8">Клык вампира</label>
<label for="ea9" class="ea-btn btn-9">Паутина арахны</label>
<label for="ea10" class="ea-btn btn-10">Шепот призрака</label>
<label for="ea11" class="ea-btn btn-11">Перо феникса</label>
<label for="ea12" class="ea-btn btn-12">Звёздная роса</label>
<label for="ea13" class="ea-btn btn-13">Искра молнии</label>
<label for="ea14" class="ea-btn btn-14">Лунный луч</label>
<label for="ea15" class="ea-btn btn-15">Чешуя дракона</label>
<label for="ea16" class="ea-btn btn-16">Драконий огонь</label>
<label for="ea17" class="ea-btn btn-17">Жемчужина глубин</label>
<label for="ea18" class="ea-btn btn-18">Слёзы русалки</label>
<label for="ea19" class="ea-btn btn-19">Душа дерева</label>
<label for="ea20" class="ea-btn btn-20">Камень преткновения</label>
</div>
</div>
<div class="ea-panel">
<h3>Священные Воды</h3>
<div class="ea-cauldron">
<span class="ea-empty-msg">Воды кристально чисты...</span>
<span class="ea-in-pot pot-1">Мандрагора</span>
<span class="ea-in-pot pot-2">Ветер</span>
<span class="ea-in-pot pot-3">Лава</span>
<span class="ea-in-pot pot-4">Слёзы</span>
<span class="ea-in-pot pot-5">Пыль</span>
<span class="ea-in-pot pot-6">Слизь</span>
<span class="ea-in-pot pot-7">Гриб</span>
<span class="ea-in-pot pot-8">Клык</span>
<span class="ea-in-pot pot-9">Паутина</span>
<span class="ea-in-pot pot-10">Шепот</span>
<span class="ea-in-pot pot-11">Перо</span>
<span class="ea-in-pot pot-12">Роса</span>
<span class="ea-in-pot pot-13">Молния</span>
<span class="ea-in-pot pot-14">Луч</span>
<span class="ea-in-pot pot-15">Чешуя</span>
<span class="ea-in-pot pot-16">Огонь</span>
<span class="ea-in-pot pot-17">Жемчуг</span>
<span class="ea-in-pot pot-18">Слёзы</span>
<span class="ea-in-pot pot-19">Душа</span>
<span class="ea-in-pot pot-20">Камень</span>
</div>
</div>
</div>

<div class="ea-actions">
<label for="ea-brew" class="ea-brew-btn">Смешать эссенцию</label>
<button type="reset" class="ea-reset-btn">Очистить колодец</button>
</div>

<div class="ea-result-box">
<div class="ea-recipe ea-fallback">
<div class="ea-recipe-title">Склизкая жижа 🤢</div>
<div class="ea-recipe-desc">Вы конечно алхимик, но борщ я бы вам не доверил варить...</div>
</div>

<div class="ea-recipe rec-12"><div class="ea-recipe-title">Зелье истошного ора 📢</div><div class="ea-recipe-desc">Орите на здоровье! Реактив вызывает спазмы голосовых связок. Идеально для общения с глухими орками.</div></div>
<div class="ea-recipe rec-13"><div class="ea-recipe-title">Паровой эльф 🫖</div><div class="ea-recipe-desc">Из ушей валит пар, при ходьбе свистите как закипающий чайник. Маскировка уровня «самовар».</div></div>
<div class="ea-recipe rec-14"><div class="ea-recipe-title">Слеза драматичного злодея 🎭</div><div class="ea-recipe-desc">Непреодолимое желание толкать высокопарные речи. Враг обычно успевает уйти.</div></div>
<div class="ea-recipe rec-15"><div class="ea-recipe-title">Светящаяся перхоть ✨</div><div class="ea-recipe-desc">Ваши волосы работают как диско-шар. Стелс-миссии отменяются.</div></div>
<div class="ea-recipe rec-16"><div class="ea-recipe-title">Летающие сопли 🦠</div><div class="ea-recipe-desc">Биологические жидкости обретают антигравитацию. Выглядит мерзко, но экономит на платках.</div></div>
<div class="ea-recipe rec-17"><div class="ea-recipe-title">Унылый галлюциноген 🍄</div><div class="ea-recipe-desc">Вы видите единорогов, но они плачут и жалуются на жизнь. Настроение испорчено.</div></div>
<div class="ea-recipe rec-18"><div class="ea-recipe-title">Вампирская мандрагора 🧛</div><div class="ea-recipe-desc">Корень кричит, вампир шипит. Вы стоите посередине с головной болью.</div></div>
<div class="ea-recipe rec-19"><div class="ea-recipe-title">Паутина в корнях 🕸️</div><div class="ea-recipe-desc">Вы пускаете корни и плетёте паутину. Садовники в шоке.</div></div>
<div class="ea-recipe rec-1-10"><div class="ea-recipe-title">Шепот мандрагоры 👻</div><div class="ea-recipe-desc">Корень теперь шепчет проклятия. Вы спите с заткнутыми ушами.</div></div>
<div class="ea-recipe rec-23"><div class="ea-recipe-title">Буря в стакане 🌪️</div><div class="ea-recipe-desc">Любая жидкость бурлит при вашем прикосновении. Пить изящно проблематично.</div></div>
<div class="ea-recipe rec-24"><div class="ea-recipe-title">Гейзер меланхолии 💧</div><div class="ea-recipe-desc">Вы плачете так сильно, что тушите пожары. Неудобно для макияжа.</div></div>
<div class="ea-recipe rec-25"><div class="ea-recipe-title">Левитация табуреток 🪑</div><div class="ea-recipe-desc">Мебель поднимается к потолку. Берегите голову!</div></div>
<div class="ea-recipe rec-26"><div class="ea-recipe-title">Липкий ветерок 💨</div><div class="ea-recipe-desc">Выдыхаете воздух, который склеивает предметы. Для поцелуев не годится.</div></div>
<div class="ea-recipe rec-27"><div class="ea-recipe-title">Грибной парашют 🍄</div><div class="ea-recipe-desc">При падении вырастает гриб. Глупо, но кости целы.</div></div>
<div class="ea-recipe rec-28"><div class="ea-recipe-title">Ветреный клык 🌬️</div><div class="ea-recipe-desc">Ваш выдох острый как клык. Поцелуи режут губы.</div></div>
<div class="ea-recipe rec-29"><div class="ea-recipe-title">Паутина на ветру 🕸️</div><div class="ea-recipe-desc">Вы плетёте паутину, которую сразу сдувает. Бесполезно и красиво.</div></div>
<div class="ea-recipe rec-2-10"><div class="ea-recipe-title">Шепот ветра 👻</div><div class="ea-recipe-desc">Вы говорите только шёпотом. Призраки гордятся.</div></div>
<div class="ea-recipe rec-34"><div class="ea-recipe-title">Искрящиеся слёзы ⚡</div><div class="ea-recipe-desc">Вы плачете фейерверками. Праздник с вами, но подушки сгорают.</div></div>
<div class="ea-recipe rec-35"><div class="ea-recipe-title">Огненная пыльца 🔥</div><div class="ea-recipe-desc">Чихаете искрами. Противопожарная служба вас знает.</div></div>
<div class="ea-recipe rec-36"><div class="ea-recipe-title">Варево жидких костей 🦴</div><div class="ea-recipe-desc">Теперь пролезете под дверью! Собраться обратно сложно.</div></div>
<div class="ea-recipe rec-37"><div class="ea-recipe-title">Магматическая жвачка 🌋</div><div class="ea-recipe-desc">Пузыри из магмы. Лопаются с взрывом. Не глотать!</div></div>
<div class="ea-recipe rec-38"><div class="ea-recipe-title">Лава вампира 🧛</div><div class="ea-recipe-desc">Ваша кровь горяча как лава. Вампиры обжигаются.</div></div>
<div class="ea-recipe rec-39"><div class="ea-recipe-title">Паутина в лаве 🕸️</div><div class="ea-recipe-desc">Вы плетёте огненную паутину. Пауки-камикадзе гордятся.</div></div>
<div class="ea-recipe rec-3-10"><div class="ea-recipe-title">Горячий шепот 🔥</div><div class="ea-recipe-desc">Ваш шёпот обжигает. Секреты теперь опасно слушать.</div></div>
<div class="ea-recipe rec-45"><div class="ea-recipe-title">Блестковость ✨</div><div class="ea-recipe-desc">Вместо крови — глиттер. При ранении — как хлопушка.</div></div>
<div class="ea-recipe rec-46"><div class="ea-recipe-title">Жабий хор 🐸</div><div class="ea-recipe-desc">Каждое слово сопровождается кваканьем. Отпугивает комаров и друзей.</div></div>
<div class="ea-recipe rec-47"><div class="ea-recipe-title">Лунная пыльца 🌙</div><div class="ea-recipe-desc">Светитесь и оставляете след из пыли. Как фея, но страннее.</div></div>
<div class="ea-recipe rec-48"><div class="ea-recipe-title">Слёзы вампира 🧛</div><div class="ea-recipe-desc">Вы плачете кровью. Вампиры сочувствуют, остальные бегут.</div></div>
<div class="ea-recipe rec-49"><div class="ea-recipe-title">Паутина слёз 🕸️</div><div class="ea-recipe-desc">Ваши слёзы превращаются в паутину. Плакать больно.</div></div>
<div class="ea-recipe rec-4-10"><div class="ea-recipe-title">Призрачные слёзы 👻</div><div class="ea-recipe-desc">Вы плачете, но слёзы проходят сквозь пол. Бесполезно.</div></div>
<div class="ea-recipe rec-56"><div class="ea-recipe-title">Болотный светлячок 💡</div><div class="ea-recipe-desc">Светитесь зелёным и пахнете тиной. Лягушки молятся вам.</div></div>
<div class="ea-recipe rec-57"><div class="ea-recipe-title">Грибная пыльца 🍄</div><div class="ea-recipe-desc">Вы чихаете спорами. Грибы растут из носа.</div></div>
<div class="ea-recipe rec-58"><div class="ea-recipe-title">Липкое перо 🪶</div><div class="ea-recipe-desc">К вам прилипает всё. Ходячий мусорный бак.</div></div>
<div class="ea-recipe rec-59"><div class="ea-recipe-title">Паутина фей 🧚</div><div class="ea-recipe-desc">Вы плетёте радужную паутину. Феи завидуют.</div></div>
<div class="ea-recipe rec-5-10"><div class="ea-recipe-title">Шепот пыли 👻</div><div class="ea-recipe-desc">Вы говорите пылью. Все чихают.</div></div>
<div class="ea-recipe rec-67"><div class="ea-recipe-title">Грибная слизь 🍄</div><div class="ea-recipe-desc">Вы выделяете светящуюся слизь. Грибы растут на спине.</div></div>
<div class="ea-recipe rec-68"><div class="ea-recipe-title">Слизь вампира 🧛</div><div class="ea-recipe-desc">Ваша слизь吸血щая. Мерзко и эффективно.</div></div>
<div class="ea-recipe rec-69"><div class="ea-recipe-title">Паутина тролля 🕸️</div><div class="ea-recipe-desc">Вы плетёте вонючую паутину. Тролли гордятся.</div></div>
<div class="ea-recipe rec-6-10"><div class="ea-recipe-title">Шепот слизи 👻</div><div class="ea-recipe-desc">Вы говорите как тролль под водой. Непонятно и мерзко.</div></div>
<div class="ea-recipe rec-78"><div class="ea-recipe-title">Лунный клык 🌙</div><div class="ea-recipe-desc">Клыки светятся по ночам. Романтично для вампиров.</div></div>
<div class="ea-recipe rec-79"><div class="ea-recipe-title">Грибная паутина 🍄</div><div class="ea-recipe-desc">Вы плетёте паутину из грибов. Мухи в восторге.</div></div>
<div class="ea-recipe rec-7-10"><div class="ea-recipe-title">Призрачный гриб 👻</div><div class="ea-recipe-desc">Грибы проходят сквозь вас. Вы — ходячая экосистема.</div></div>
<div class="ea-recipe rec-89"><div class="ea-recipe-title">Клык в паутине 🕷️</div><div class="ea-recipe-desc">Клыки стреляют паутиной. Гигиена невозможна.</div></div>
<div class="ea-recipe rec-8-10"><div class="ea-recipe-title">Призрачный укус 👻</div><div class="ea-recipe-desc">Вы кусаете, но жертва чувствует только холод.</div></div>
<div class="ea-recipe rec-9-10"><div class="ea-recipe-title">Паутина шепотов 🕸️</div><div class="ea-recipe-desc">Ваша паутина шепчет секреты. Очень мешает спать.</div></div>
<div class="ea-recipe rec-1112"><div class="ea-recipe-title">Перо звёздной ночи ✨</div><div class="ea-recipe-desc">Линяете светящимися перьями. Уборка — медитация.</div></div>
<div class="ea-recipe rec-1314"><div class="ea-recipe-title">Молниеносный луч ⚡</div><div class="ea-recipe-desc">Светитесь и бьете током. Стелс невозможен.</div></div>
<div class="ea-recipe rec-1516"><div class="ea-recipe-title">Драконий пепел 🐉</div><div class="ea-recipe-desc">Чихаете огнём и пеплом. Пожарные вас знают.</div></div>
<div class="ea-recipe rec-1718"><div class="ea-recipe-title">Коралловые слёзы 🪸</div><div class="ea-recipe-desc">Плачете кораллами. Аквариумисты готовы платить.</div></div>
<div class="ea-recipe rec-1920"><div class="ea-recipe-title">Душа в камне 🗿</div><div class="ea-recipe-desc">Вы чувствуете как дерево. Философы плачут от счастья.</div></div>
</div>
</div>
</form>
</div>
[/html]

Поделиться82026-03-26 19:29:24

Автор: Paradox
Пришёл, увидел, закурил
Сообщений: 124

[html]
<div class="tech-player">
<div class="player-glass">


<div class="art-wrapper">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' fill='%23111827'><rect width='100%' height='100%'/></svg>" alt="Art" class="track-art">
<div class="art-overlay"></div>
<div class="loading-spinner"></div>


<div class="eq-bars">
<span></span><span></span><span></span>
</div>
</div>

<div class="info-wrapper">
<div class="track-title">Загрузка данных...</div>
<div class="track-artist">Синхронизация</div>
</div>

<div class="progress-wrapper">
<span class="time time-current">0:00</span>
<div class="slider-container" style="--progress: 0%;">
<input type="range" class="progress-bar" value="0" min="0" max="100" step="0.1">
</div>
<span class="time time-total">0:00</span>
</div>

<div class="controls-wrapper">
<button class="ctrl-btn btn-prev" title="Предыдущий трек">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
</button>

<button class="ctrl-btn btn-play" title="Play / Pause">

<svg class="icon-play" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>

<svg class="icon-pause" viewBox="0 0 24 24" fill="currentColor" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
</button>

<button class="ctrl-btn btn-next" title="Следующий трек">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
</button>
</div>

</div>
<audio class="audio-core"></audio>
</div>

.tech-player {
/* Основные цвета темы */
--bg-color: rgba(13, 17, 23, 0.75);
--border-color: rgba(0, 255, 255, 0.15);
--accent-color: #00f0ff; /* Неоновый циановый */
--accent-glow: 0 0 15px rgba(0, 240, 255, 0.4);
--text-main: #ffffff;
--text-sub: #8b949e;

display: inline-block;
user-select: none;
margin: 10px;
}

/* Эффект стеклянной панели */
.player-glass {
background: var(--bg-color);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border-color);
border-radius: 20px;
padding: 20px;
width: 300px;
box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
box-sizing: border-box;
transition: box-shadow 0.4s ease;
}

.tech-player.is-playing .player-glass {
box-shadow: 0 20px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05), var(--accent-glow);
border-color: rgba(0, 240, 255, 0.3);
}

/* Обложка трека */
.art-wrapper {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 16px;
overflow: hidden;
margin-bottom: 16px;
background: #000;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.track-art {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease, opacity 0.3s ease;
}

.tech-player.is-playing .track-art {
transform: scale(1.05); /* Легкий зум при игре */
}

/* Темный градиент поверх картинки для контраста */
.art-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(13,17,23,0.9) 0%, rgba(13,17,23,0) 50%);
}

/* Инфо о треке */
.info-wrapper {
text-align: center;
margin-bottom: 16px;
font-family: 'Inter', sans-serif;
}

.track-title {
color: var(--text-main);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.5px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.track-artist {
color: var(--accent-color);
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: 'Orbitron', sans-serif; /* Футуристичный шрифт */
}

/* Таймеры и полоса прокрутки */
.progress-wrapper {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
}

.time {
font-family: 'Orbitron', monospace;
font-size: 10px;
color: var(--text-sub);
width: 35px;
text-align: center;
}

.slider-container {
flex-grow: 1;
position: relative;
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
/* Динамическая заливка через CSS переменную */
background-image: linear-gradient(var(--accent-color), var(--accent-color));
background-size: var(--progress) 100%;
background-repeat: no-repeat;
}

.progress-bar {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
margin: 0;
opacity: 0; /* Скрываем стандартный инпут, оставляя его кликабельным */
cursor: pointer;
}

/* "Светлячок" на конце прогресс-бара */
.slider-container::after {
content: '';
position: absolute;
top: 50%;
left: var(--progress);
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color);
pointer-events: none;
transition: opacity 0.2s;
opacity: 0;
}

.progress-wrapper:hover .slider-container::after,
.tech-player.is-playing .slider-container::after {
opacity: 1;
}

/* Кнопки управления */
.controls-wrapper {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}

.ctrl-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--text-sub);
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}

.ctrl-btn:hover {
color: var(--accent-color);
filter: drop-shadow(0 0 8px var(--accent-color));
transform: scale(1.1);
}

.btn-prev svg, .btn-next svg {
width: 24px;
height: 24px;
}

.btn-play {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(0, 240, 255, 0.1);
color: var(--accent-color);
border: 1px solid rgba(0, 240, 255, 0.3);
box-shadow: inset 0 0 15px rgba(0, 240, 255, 0.1);
}

.btn-play svg {
width: 28px;
height: 28px;
}

.btn-play:hover {
background: rgba(0, 240, 255, 0.2);
box-shadow: inset 0 0 20px rgba(0, 240, 255, 0.3), var(--accent-glow);
transform: scale(1.05);
}

/* Эквалайзер (появляется на обложке при игре) */
.eq-bars {
position: absolute;
bottom: 12px;
right: 12px;
display: flex;
gap: 3px;
align-items: flex-end;
height: 16px;
opacity: 0;
transition: opacity 0.3s;
}

.tech-player.is-playing .eq-bars {
opacity: 1;
}

.eq-bars span {
width: 4px;
background: var(--accent-color);
border-radius: 2px;
box-shadow: 0 0 5px var(--accent-color);
animation: eq-bounce 1s infinite ease-in-out;
}

.eq-bars span:nth-child(1) { animation-delay: 0.1s; height: 60%; }
.eq-bars span:nth-child(2) { animation-delay: 0.3s; height: 100%; }
.eq-bars span:nth-child(3) { animation-delay: 0.2s; height: 80%; }

@keyframes eq-bounce {
0%, 100% { transform: scaleY(0.5); }
50% { transform: scaleY(1); }
}

/* Лоадер */
.loading-spinner {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 40px; height: 40px;
border: 3px solid rgba(255,255,255,0.1);
border-top-color: var(--accent-color);
border-radius: 50%;
animation: spin 1s linear infinite;
display: none;
}

.loading-spinner.active { display: block; }

@keyframes spin { 100% { transform: translate(-50%, -50%) rotate(360deg); } }
</style>

document.querySelectorAll('.tech-player').forEach(player => {
let currentTrack = 0;
let isPlaying = false;
let isDragging = false;

// Элементы
const audio = player.querySelector('.audio-core');
const playBtn = player.querySelector('.btn-play');
const iconPlay = player.querySelector('.icon-play');
const iconPause = player.querySelector('.icon-pause');
const prevBtn = player.querySelector('.btn-prev');
const nextBtn = player.querySelector('.btn-next');

const spinner = player.querySelector('.loading-spinner');
const artImg = player.querySelector('.track-art');
const titleEl = player.querySelector('.track-title');
const artistEl = player.querySelector('.track-artist');

const sliderContainer = player.querySelector('.slider-container');
const progressBar = player.querySelector('.progress-bar');
const timeCurrentEl = player.querySelector('.time-current');
const timeTotalEl = player.querySelector('.time-total');

const defaultArt = artImg.src;

// Форматирование времени
const formatTime = (secs) => {
if (isNaN(secs)) return "0:00";
const m = Math.floor(secs / 60);
const s = Math.floor(secs % 60);
return `${m}:${s < 10 ? '0' : ''}${s}`;
};

// Загрузка трека
const loadTrack = (index) => {
const track = tracks[index];

spinner.classList.add('active');
titleEl.textContent = track.title;
artistEl.textContent = track.artist;

progressBar.value = 0;
sliderContainer.style.setProperty('--progress', '0%');
timeCurrentEl.textContent = "0:00";
timeTotalEl.textContent = "0:00";

// Плавная смена обложки
artImg.style.opacity = 0;
setTimeout(() => {
artImg.onload = () => {
spinner.classList.remove('active');
artImg.style.opacity = 1;
};
artImg.onerror = () => {
artImg.src = defaultArt;
spinner.classList.remove('active');
artImg.style.opacity = 1;
};
artImg.src = track.art || defaultArt;
}, 200);

audio.src = track.url;
audio.load();
};

// Управление воспроизведением
const togglePlay = () => {
if (isPlaying) {
audio.pause();
iconPlay.style.display = 'block';
iconPause.style.display = 'none';
player.classList.remove('is-playing');
} else {
audio.play().catch(() => alert("Ошибка потока."));
iconPlay.style.display = 'none';
iconPause.style.display = 'block';
player.classList.add('is-playing');
}
isPlaying = !isPlaying;
};

// События кнопок
playBtn.addEventListener('click', togglePlay);

nextBtn.addEventListener('click', () => {
currentTrack = (currentTrack + 1) % tracks.length;
loadTrack(currentTrack);
if (isPlaying) audio.play();
});

prevBtn.addEventListener('click', () => {
currentTrack = (currentTrack - 1 + tracks.length) % tracks.length;
loadTrack(currentTrack);
if (isPlaying) audio.play();
});

// Обновление таймера и прогресс-бара
audio.addEventListener('timeupdate', () => {
if (!isDragging) {
const percent = (audio.currentTime / audio.duration) * 100 || 0;
progressBar.value = percent;
sliderContainer.style.setProperty('--progress', `${percent}%`);
timeCurrentEl.textContent = formatTime(audio.currentTime);
}
});

audio.addEventListener('loadedmetadata', () => {
timeTotalEl.textContent = formatTime(audio.duration);
});

// Перемотка
progressBar.addEventListener('input', () => {
isDragging = true;
sliderContainer.style.setProperty('--progress', `${progressBar.value}%`);
const seekTime = (progressBar.value / 100) * audio.duration;
timeCurrentEl.textContent = formatTime(seekTime);
});

progressBar.addEventListener('change', () => {
audio.currentTime = (progressBar.value / 100) * audio.duration;
isDragging = false;
});

audio.addEventListener('ended', () => nextBtn.click());

// Старт
if (tracks.length > 0) loadTrack(0);
});
})();
</script>
[/html]

Realatorum Paradox

Меню навигации

Пользовательские ссылки

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