Realatorum Paradox

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

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

Вы здесь » Realatorum Paradox » Арт творчество » Основа

Основа

Страница: 1

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

1

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

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

2

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

[html]<div class="post-template">
  <h1>Аниме чиби стикер: лаборантка</h1>
 
  <div class="section">
    <h2>💡 Идея</h2>
    <p>Собрать промпт для создания аниме стикера в стиле чиби с изображением девушки в лабораторном халате. Цель - получить милый, детализированный стикер с чистыми линиями и белой рамкой, подходящий для печати или использования в мессенджерах.</p>
  </div>
 
  <div class="section">
    <h2>🔧 Решение</h2>
    <div class="code-block">
      <div class="code-header">
        <span>Промпт для генерации</span>
        <button class="copy-btn" onclick="copyPrompt()">⎘ Скопировать</button>
      </div>
      <div class="code-content">
        <pre><code>A high-quality chibi anime sticker of a human girl. She has long, flowing white hair and large, expressive pink eyes. She wears an oversized white lab coat that is several sizes too big for her, hanging loosely and comically off her small frame. Underneath the lab coat, she wears a simple black t-shirt and black jeans with a white belt. The art style is a die-cut sticker with clean lines, detailed art, and a thick white border, isolated on a white background.</code></pre>
      </div>
    </div>
  </div>
 
  <div class="section">
    <h2>🖼️ Пример работы</h2>
    <div class="example-image">
      <img src="https://upforme.ru/uploads/001c/1f/11/2/686272.png" alt="Аниме чиби стикер">
      <p>Результат генерации по предложенному промпту</p>
    </div>
  </div>
</div>

<style>
.post-template {
  max-width: 800px;
  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;
}

h1 {
  color: #d4af37;
  text-align: center;
  padding: 20px;
  margin: 0;
  font-size: 2em;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
  border-bottom: 2px solid rgba(184, 134, 11, 0.3);
}

.section {
  padding: 20px 30px;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}

.section:last-child {
  border-bottom: none;
}

h2 {
  color: #4ecdc4;
  margin: 0 0 15px 0;
  font-size: 1.5em;
  display: flex;
  align-items: center;
}

h2 .emoji {
  margin-right: 10px;
}

p {
  margin: 10px 0;
  line-height: 1.6;
}

/* Блок с кодом */
.code-block {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #b8860b;
  border-radius: 10px;
  overflow: hidden;
  margin: 15px 0;
}

.code-header {
  background: rgba(184, 134, 11, 0.2);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
}

.code-header span {
  color: #d4af37;
  font-weight: bold;
}

.copy-btn {
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  color: #0a0e27;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
}

.copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.5);
  background: linear-gradient(135deg, #d4af37 0%, #f4e19c 100%);
}

.copy-btn:active {
  transform: translateY(0);
}

.code-content {
  padding: 20px;
}

.code-content pre {
  margin: 0;
  color: #e0e6ed;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.95em;
}

.code-content code {
  color: #4ecdc4;
}

/* Блок с примером */
.example-image {
  text-align: center;
  margin: 20px 0;
}

.example-image img {
  max-width: 100%;
  border-radius: 10px;
  border: 3px solid #b8860b;
  box-shadow: 0 5px 15px rgba(184, 134, 11, 0.3);
}

.example-image p {
  margin-top: 15px;
  color: #8b8680;
  font-style: italic;
}

/* Анимация при копировании */
.copied {
  animation: copiedPulse 0.6s ease;
}

@keyframes copiedPulse {
  0% { background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%); }
  50% { background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); }
  100% { background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%); }
}

/* Уведомление об ошибке */
.error-message {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  padding: 15px 25px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
</style>

<script>
function copyPrompt() {
  const promptText = `A high-quality chibi anime sticker of a human girl. She has long, flowing white hair and large, expressive pink eyes. She wears an oversized white lab coat that is several sizes too big for her, hanging loosely and comically off her small frame. Underneath the lab coat, she wears a simple black t-shirt and black jeans with a white belt. The art style is a die-cut sticker with clean lines, detailed art, and a thick white border, isolated on a white background.`;
 
  // Метод 1: Современный API (если доступен)
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(promptText).then(() => {
      showSuccess();
    }).catch(err => {
      fallbackCopyTextToClipboard(promptText);
    });
  } else {
    // Метод 2: Запасной вариант
    fallbackCopyTextToClipboard(promptText);
  }
}

function fallbackCopyTextToClipboard(text) {
  const textArea = document.createElement("textarea");
  textArea.value = text;
 
  // Делаем текстовое поле невидимым
  textArea.style.position = "fixed";
  textArea.style.left = "-999999px";
  textArea.style.top = "-999999px";
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
 
  try {
    // Попытка скопировать
    const successful = document.execCommand('copy');
    if (successful) {
      showSuccess();
    } else {
      showError();
    }
  } catch (err) {
    showError();
  }
 
  document.body.removeChild(textArea);
}

function showSuccess() {
  const btn = document.querySelector('.copy-btn');
  btn.classList.add('copied');
  btn.textContent = '✓ Скопировано!';
 
  setTimeout(() => {
    btn.classList.remove('copied');
    btn.textContent = '⎘ Скопировать';
  }, 2000);
}

function showError() {
  // Удаляем предыдущие сообщения об ошибках
  const existingError = document.querySelector('.error-message');
  if (existingError) {
    existingError.remove();
  }
 
  // Создаем новое сообщение
  const errorDiv = document.createElement('div');
  errorDiv.className = 'error-message';
  errorDiv.innerHTML = `
    ❌ Не удалось скопировать автоматически<br>
    <small>Выделите текст и нажмите Ctrl+C</small>
  `;
 
  document.body.appendChild(errorDiv);
 
  // Удаляем через 5 секунд
  setTimeout(() => {
    errorDiv.remove();
  }, 5000);
}
</script>[/html]

3

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

[html]<div class="post-template">
  <h1>Аниме чиби стикер: лаборантка (JS-промптинг)</h1>
 
  <div class="section">
    <h2>💡 Идея</h2>
    <p>Создать динамический промпт для генерации аниме стикера в стиле чиби с использованием JavaScript. Подход позволяет легко изменять параметры персонажа и стиля, сохраняя структуру промпта. Идеально для экспериментов с разными вариациями персонажа.</p>
  </div>
 
  <div class="section">
    <h2>🔧 Решение</h2>
    <div class="code-block">
      <div class="code-header">
        <span>JS-промпт для генерации</span>
        <button class="copy-btn" onclick="copyPrompt()">⎘ Скопировать</button>
      </div>
      <div class="code-content">
        <pre><code>// Параметры персонажа
const character = {
  type: "human girl",
  hair: "long, flowing white hair",
  eyes: "large, expressive pink eyes",
  clothing: {
    outer: "oversized white lab coat that is several sizes too big for her, hanging loosely and comically off her small frame",
    inner: "simple black t-shirt and black jeans with a white belt"
  }
};

// Параметры стиля
const artStyle = {
  type: "die-cut sticker",
  features: "clean lines, detailed art, and a thick white border",
  background: "isolated on a white background"
};

// Генерация промпта
function generatePrompt() {
  return `A high-quality chibi anime sticker of a ${character.type}. She has ${character.hair} and ${character.eyes}. She wears ${character.clothing.outer}. Underneath the lab coat, she wears ${character.clothing.inner}. The art style is a ${artStyle.type} with ${artStyle.features}, ${artStyle.background}.`;
}

// Результат
const prompt = generatePrompt();</code></pre>
      </div>
    </div>
   
    <div class="advantages">
      <h3>Преимущества JS-подхода:</h3>
      <ul>
        <li>✅ Легко менять параметры персонажа</li>
        <li>✅ Быстро создавать вариации стиля</li>
        <li>✅ Структурированный и читаемый код</li>
        <li>✅ Возможность автоматической генерации</li>
      </ul>
    </div>
  </div>
 
  <div class="section">
    <h2>🖼️ Пример работы</h2>
    <div class="example-image">
      <img src="https://upforme.ru/uploads/001c/1f/11/2/756881.png" alt="Аниме чиби стикер - оригинал">
      <p>Оригинальный результат генерации по JS-промпту</p>
    </div>
   
    <div class="variations">
      <h3>Пример вариаций:</h3>
      <div class="variation-examples">
        <div class="variation">
          <h4>🔴 Вариант 1: Розовые волосы</h4>
          <img src="https://upforme.ru/uploads/001c/1f/11/2/501219.png" alt="Аниме чиби стикер - розовые волосы">
          <code>character.hair = "long, flowing pink hair";</code>
        </div>
        <div class="variation">
          <h4>🔵 Вариант 2: Синий худи</h4>
          <img src="https://upforme.ru/uploads/001c/1f/11/2/872051.png" alt="Аниме чиби стикер - синий худи">
          <code>character.clothing.outer = "oversized blue hoodie";</code>
        </div>
        <div class="variation">
          <h4>⚪ Оригинал</h4>
          <img src="https://upforme.ru/uploads/001c/1f/11/2/756881.png" alt="Аниме чиби стикер - оригинал">
          <code>// Без изменений</code>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.post-template {
  max-width: 800px;
  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;
}

h1 {
  color: #d4af37;
  text-align: center;
  padding: 20px;
  margin: 0;
  font-size: 2em;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.3);
  border-bottom: 2px solid rgba(184, 134, 11, 0.3);
}

.section {
  padding: 20px 30px;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}

.section:last-child {
  border-bottom: none;
}

h2 {
  color: #4ecdc4;
  margin: 0 0 15px 0;
  font-size: 1.5em;
  display: flex;
  align-items: center;
}

h3 {
  color: #d4af37;
  margin: 15px 0 10px 0;
  font-size: 1.2em;
}

h4 {
  color: #4ecdc4;
  margin: 10px 0 5px 0;
  font-size: 1em;
}

p {
  margin: 10px 0;
  line-height: 1.6;
}

ul {
  padding-left: 20px;
  margin: 10px 0;
}

li {
  margin: 5px 0;
}

/* Блок с кодом */
.code-block {
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid #b8860b;
  border-radius: 10px;
  overflow: hidden;
  margin: 15px 0;
}

.code-header {
  background: rgba(184, 134, 11, 0.2);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
}

.code-header span {
  color: #d4af37;
  font-weight: bold;
}

.copy-btn {
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  color: #0a0e27;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 2px 8px rgba(184, 134, 11, 0.3);
}

.copy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.5);
  background: linear-gradient(135deg, #d4af37 0%, #f4e19c 100%);
}

.copy-btn:active {
  transform: translateY(0);
}

.code-content {
  padding: 20px;
}

.code-content pre {
  margin: 0;
  color: #e0e6ed;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.95em;
}

.code-content code {
  color: #4ecdc4;
}

/* Преимущества */
.advantages {
  background: rgba(78, 205, 196, 0.1);
  border-left: 3px solid #4ecdc4;
  padding: 15px;
  border-radius: 0 8px 8px 0;
  margin: 20px 0;
}

.advantages ul {
  margin: 0;
  padding-left: 20px;
}

.advantages li {
  margin: 8px 0;
}

/* Блок с примером */
.example-image {
  text-align: center;
  margin: 20px 0;
}

.example-image img {
  max-width: 100%;
  max-height: 300px;
  border-radius: 10px;
  border: 3px solid #b8860b;
  box-shadow: 0 5px 15px rgba(184, 134, 11, 0.3);
}

.example-image p {
  margin-top: 15px;
  color: #8b8680;
  font-style: italic;
}

/* Вариации */
.variations {
  margin-top: 25px;
}

.variation-examples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 15px;
}

.variation {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(184, 134, 11, 0.3);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  transition: transform 0.3s;
}

.variation:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(184, 134, 11, 0.2);
}

.variation h4 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 1.1em;
}

.variation img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-bottom: 15px;
  border: 2px solid rgba(184, 134, 11, 0.5);
}

.variation code {
  display: block;
  background: rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 6px;
  margin-top: 10px;
  font-size: 0.9em;
  color: #4ecdc4;
  text-align: left;
}

/* Анимация при копировании */
.copied {
  animation: copiedPulse 0.6s ease;
}

@keyframes copiedPulse {
  0% { background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%); }
  50% { background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%); }
  100% { background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%); }
}

/* Уведомление об ошибке */
.error-message {
  position: fixed;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  color: white;
  padding: 15px 25px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
  z-index: 1000;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
</style>

<script>
function copyPrompt() {
  const promptText = `// Параметры персонажа
const character = {
  type: "human girl",
  hair: "long, flowing white hair",
  eyes: "large, expressive pink eyes",
  clothing: {
    outer: "oversized white lab coat that is several sizes too big for her, hanging loosely and comically off her small frame",
    inner: "simple black t-shirt and black jeans with a white belt"
  }
};

// Параметры стиля
const artStyle = {
  type: "die-cut sticker",
  features: "clean lines, detailed art, and a thick white border",
  background: "isolated on a white background"
};

// Генерация промпта
function generatePrompt() {
  return \`A high-quality chibi anime sticker of a \${character.type}. She has \${character.hair} and \${character.eyes}. She wears \${character.clothing.outer}. Underneath the lab coat, she wears \${character.clothing.inner}. The art style is a \${artStyle.type} with \${artStyle.features}, \${artStyle.background}.\`;
}

// Результат
const prompt = generatePrompt();`;
 
  // Метод 1: Современный API (если доступен)
  if (navigator.clipboard && window.isSecureContext) {
    navigator.clipboard.writeText(promptText).then(() => {
      showSuccess();
    }).catch(err => {
      fallbackCopyTextToClipboard(promptText);
    });
  } else {
    // Метод 2: Запасной вариант
    fallbackCopyTextToClipboard(promptText);
  }
}

function fallbackCopyTextToClipboard(text) {
  const textArea = document.createElement("textarea");
  textArea.value = text;
 
  // Делаем текстовое поле невидимым
  textArea.style.position = "fixed";
  textArea.style.left = "-999999px";
  textArea.style.top = "-999999px";
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
 
  try {
    // Попытка скопировать
    const successful = document.execCommand('copy');
    if (successful) {
      showSuccess();
    } else {
      showError();
    }
  } catch (err) {
    showError();
  }
 
  document.body.removeChild(textArea);
}

function showSuccess() {
  const btn = document.querySelector('.copy-btn');
  btn.classList.add('copied');
  btn.textContent = '✓ Скопировано!';
 
  setTimeout(() => {
    btn.classList.remove('copied');
    btn.textContent = '⎘ Скопировать';
  }, 2000);
}

function showError() {
  // Удаляем предыдущие сообщения об ошибках
  const existingError = document.querySelector('.error-message');
  if (existingError) {
    existingError.remove();
  }
 
  // Создаем новое сообщение
  const errorDiv = document.createElement('div');
  errorDiv.className = 'error-message';
  errorDiv.innerHTML = `
    ❌ Не удалось скопировать автоматически<br>
    <small>Выделите текст и нажмите Ctrl+C</small>
  `;
 
  document.body.appendChild(errorDiv);
 
  // Удаляем через 5 секунд
  setTimeout(() => {
    errorDiv.remove();
  }, 5000);
}
</script>[/html]

Страница: 1

Вы здесь » Realatorum Paradox » Арт творчество » Основа

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