[html]<!DOCTYPE html>
<html>
<head>
<style>
/* Основной контейнер */
.post-container {
display: flex;
max-width: 900px;
margin: 20px auto;
background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.7);
color: #e0e6ed;
font-family: 'Courier New', monospace;
}
/* Карусель */
.carousel-section {
width: 450px;
height: 600px;
position: relative;
background: rgba(0,0,0,0.3);
border-right: 2px solid #00d9ff;
}
.carousel {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.carousel-slide {
position: absolute;
width: 100%;
height: 100%;
padding: 30px 30px 70px 30px; /* Увеличенный нижний отступ */
box-sizing: border-box;
opacity: 0;
transition: opacity 0.5s ease-in-out;
display: flex;
flex-direction: column;
overflow-y: auto;
z-index: 1; /* Базовый z-index для слайда */
}
.carousel-slide.active {
opacity: 1;
z-index: 2; /* Активный слайд выше */
}
/* Кнопки карусели */
.carousel-button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(0,217,255,0.2);
border: 1px solid #00d9ff;
color: #00d9ff;
font-size: 24px;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
z-index: 10;
transition: all 0.3s;
}
.carousel-button:hover {
background: rgba(0,217,255,0.4);
box-shadow: 0 0 15px rgba(0,217,255,0.7);
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
/* Индикаторы */
.carousel-indicators {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 20; /* Высокий z-index для индикаторов */
}
.indicator {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
cursor: pointer;
transition: all 0.3s;
}
.indicator.active {
background: #00d9ff;
box-shadow: 0 0 10px rgba(0,217,255,0.7);
}
/* Арт справа */
.art-section {
width: 450px;
height: 600px;
background: #0f3460;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
}
.art-section img {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
/* Стили контента */
h1 {
color: #00d9ff;
font-size: 1.8em;
margin-bottom: 15px;
text-shadow: 0 0 10px rgba(0,217,255,0.5);
}
h2 {
color: #ff6b6b;
border-left: 3px solid #ff6b6b;
padding-left: 10px;
margin: 15px 0 10px;
font-size: 1.2em;
}
h3 {
color: #4ecdc4;
margin: 12px 0 8px;
font-size: 1.1em;
}
p {
margin: 8px 0;
line-height: 1.4;
}
ul {
padding-left: 20px;
margin: 8px 0;
}
li {
margin: 5px 0;
}
/* Элементы оформления */
.example {
background: rgba(0,217,255,0.1);
border-left: 3px solid #00d9ff;
padding: 8px 12px;
margin: 8px 0;
border-radius: 0 5px 5px 0;
font-size: 0.9em;
}
.important {
background: rgba(255,193,7,0.1);
border: 1px dashed rgba(255,193,7,0.3);
padding: 12px;
border-radius: 8px;
margin: 15px 0;
}
/* FAQ Аккордеон внутри слайда */
.accordion {
background: rgba(255,107,107,0.1);
border-radius: 8px;
margin: 15px 0;
overflow: hidden;
position: relative;
z-index: 5; /* Высокий z-index для аккордеона */
pointer-events: auto; /* Гарантируем кликабельность */
}
.accordion-header {
background: rgba(255,107,107,0.2);
padding: 10px;
cursor: pointer;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
transition: background 0.3s;
position: relative;
z-index: 6; /* Еще выше для заголовка */
}
.accordion-header:hover {
background: rgba(255,107,107,0.3);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: rgba(0,0,0,0.2);
position: relative;
z-index: 5;
}
.accordion-content.active {
max-height: 300px;
}
.accordion-content div {
padding: 15px;
pointer-events: auto; /* Гарантируем кликабельность контента */
}
/* Футер внутри слайда */
.footer {
margin-top: auto;
text-align: center;
font-style: italic;
color: #aaa;
padding-top: 15px;
}
/* Эмодзи */
.emoji {
font-size: 1.1em;
vertical-align: middle;
}
/* Адаптивность */
@media (max-width: 920px) {
.post-container {
flex-direction: column;
max-width: 450px;
}
.carousel-section {
width: 100%;
height: 400px;
}
.art-section {
width: 100%;
height: 400px;
border-right: none;
border-top: 2px solid #00d9ff;
}
}
</style>
</head>
<body>
<div class="post-container">
<!-- Карусель с текстом -->
<div class="carousel-section">
<div class="carousel">
<!-- Слайд 1: Заголовок и цель -->
<div class="carousel-slide active">
<h1>🎨 Генерация артов</h1>
<p>Приветствую всех, кто <strong>не ровно дышит</strong> к генерации изображений! Эта тема — моя личная песочница для складирования знаний. Здесь мы копим рабочие схемы для быстрой генерации артов в любых стилях.</p>
<div class="important">
<h2>🎯 Цель темы</h2>
<ul>
<li>Каждый пост — готовое решение</li>
<li>Минимум воды, максимум практики</li>
<li>Четкая структура для быстрого поиска</li>
</ul>
</div>
<div class="footer">
Используйте кнопки для навигации ➡️
</div>
</div>
<!-- Слайд 2: Шаблон постов -->
<div class="carousel-slide">
<h2>📚 Шаблон постов</h2>
<p>Оформляйте посты строго по шаблону:</p>
<h3>1) Теория</h3>
<p><em>Кратко суть идеи (1-3 предложения)</em></p>
<div class="example">
Пример: "Как получить киберпанк: неон + контраст + футуризм"
</div>
<h3>2) Решение</h3>
<p><em>Лучший промпт с пояснениями</em></p>
<div class="example">
<code>cyberpunk cityscape, neon lights, rain --ar 16:9</code>
</div>
<h3>3) Пример</h3>
<p><em>Результат генерации</em></p>
<div class="example">
--
</div>
<div class="footer">
Следующий слайд: FAQ для новичков 🔍
</div>
</div>
<!-- Слайд 3: FAQ -->
<div class="carousel-slide">
<h2>❓ FAQ для новичков</h2>
<p>Если не в курсе, разорви:</p>
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Что такое промпт?</span>
<span>▼</span>
</div>
<div class="accordion-content">
<div>
Текстовый запрос для ИИ. Чем точнее и детальнее, тем лучше результат.
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Какие ИИ используем?</span>
<span>▼</span>
</div>
<div class="accordion-content">
<div>
Midjourney, Stable Diffusion, DALL-E. Можно и другие.
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-header" onclick="toggleAccordion(this)">
<span>Улучшение качества</span>
<span>▼</span>
</div>
<div class="accordion-content">
<div>
- Конкретные описания<br>
- Параметры (--ar, --v)<br>
- Негативные промпты
</div>
</div>
</div>
<div class="footer">
Последний слайд: важные правила ⚠️
</div>
</div>
<!-- Слайд 4: Важно -->
<div class="carousel-slide">
<h2>⚠️ Важно!</h2>
<div class="important">
<h3>Перед публикацией:</h3>
<ul>
<li><strong>Проверяйте поиск</strong> — возможно, тема уже есть</li>
<li>Используйте тег [img] для примеров</li>
<li>Запрещено: насилие, экстремизм, незаконный контент</li>
</ul>
</div>
<div class="example">
<strong>Помните:</strong> ИИ — инструмент, магия в ваших промптах!
</div>
<div class="footer">
Готов к вашим экспериментам! 💡
</div>
</div>
</div>
<!-- Кнопки навигации -->
<button class="carousel-button prev" onclick="changeSlide(-1)">❮</button>
<button class="carousel-button next" onclick="changeSlide(1)">❯</button>
<!-- Индикаторы -->
<div class="carousel-indicators">
<span class="indicator active" onclick="currentSlide(0)"></span>
<span class="indicator" onclick="currentSlide(1)"></span>
<span class="indicator" onclick="currentSlide(2)"></span>
<span class="indicator" onclick="currentSlide(3)"></span>
</div>
</div>
<!-- Арт справа -->
<div class="art-section">
<img src="https://upforme.ru/uploads/001c/1f/11/2/481627.png" alt="AI Art Generation">
</div>
</div>
<script>
let currentSlideIndex = 0;
const slides = document.querySelectorAll('.carousel-slide');
const indicators = document.querySelectorAll('.indicator');
function showSlide(index) {
// Скрываем все слайды
slides.forEach(slide => slide.classList.remove('active'));
indicators.forEach(indicator => indicator.classList.remove('active'));
// Показываем текущий слайд
slides[index].classList.add('active');
indicators[index].classList.add('active');
}
function changeSlide(direction) {
currentSlideIndex += direction;
if (currentSlideIndex >= slides.length) {
currentSlideIndex = 0;
} else if (currentSlideIndex < 0) {
currentSlideIndex = slides.length - 1;
}
showSlide(currentSlideIndex);
}
function currentSlide(index) {
currentSlideIndex = index;
showSlide(currentSlideIndex);
}
// Автопереключение слайдов (опционально)
setInterval(() => {
changeSlide(1);
}, 10000); // Смена слайда каждые 10 секунд
// Функция для аккордеона внутри слайдов
function toggleAccordion(element) {
const content = element.nextElementSibling;
const icon = element.querySelector('span:last-child');
// Закрываем все другие аккордеоны в этом слайде
const allAccordions = element.closest('.carousel-slide').querySelectorAll('.accordion-content');
const allIcons = element.closest('.carousel-slide').querySelectorAll('.accordion-header span:last-child');
allAccordions.forEach(acc => {
if (acc !== content) {
acc.classList.remove('active');
}
});
allIcons.forEach(ic => {
if (ic !== icon) {
ic.textContent = '▼';
}
});
// Переключаем текущий аккордеон
content.classList.toggle('active');
icon.textContent = content.classList.contains('active') ? '▲' : '▼';
}
</script>
</body>
</html>[/html]
