Realatorum Paradox

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

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

Вы здесь » Realatorum Paradox » Витрина » Оформление

Оформление

Страница: 1

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

1

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

[html]<div class="rules-container">
  <!-- Заголовок -->
  <div class="rules-header">
    <h1>📋 Правила оформления анкет</h1>
    <p>В этом разделе мы создаем и адаптируем шаблоны анкет под ваши нужды</p>
  </div>
 
  <!-- Основной контент -->
  <div class="rules-content">
    <!-- Изображение слева -->
    <div class="rules-image">
      <img src="https://upforme.ru/uploads/001c/1f/11/2/629305.png" alt="Оформление анкет">
    </div>
   
    <!-- Карусель справа -->
    <div class="rules-carousel">
      <div class="carousel-container">
        <!-- Слайд 1 -->
        <div class="carousel-slide active">
          <div class="slide-number">01</div>
          <h3>Выбор шаблона</h3>
          <p>Изучите доступные шаблоны и выберите подходящий под вашу ролевую. Обращайте внимание на теги - они указывают тематику.</p>
          <div class="slide-tip">
            <span class="tip-icon">💡</span>
            <span>Каждый шаблон адаптирован под определенный жанр</span>
          </div>
        </div>
       
        <!-- Слайд 2 -->
        <div class="carousel-slide">
          <div class="slide-number">02</div>
          <h3>Заполнение анкеты</h3>
          <p>Нажмите кнопку "Шаблон", скопируйте код и заполните информацию о персонаже. Добавьте важные детали в комментарии.</p>
          <div class="slide-tip">
            <span class="tip-icon">📝</span>
            <span>Чем подробнее описание, тем лучше результат</span>
          </div>
        </div>
       
        <!-- Слайд 3 -->
        <div class="carousel-slide">
          <div class="slide-number">03</div>
          <h3>Адаптация под форум</h3>
          <p>Укажите, какой раздел лишний или чего не хватает. Предложите цветовую палитру и необходимые изменения.</p>
          <div class="slide-tip">
            <span class="tip-icon">🎨</span>
            <span>Мы можем настроить любой элемент дизайна</span>
          </div>
        </div>
       
        <!-- Слайд 4 -->
        <div class="carousel-slide">
          <div class="slide-number">04</div>
          <h3>Связь с админами</h3>
          <p>Отправьте заполненный шаблон и ваши пожелания модераторам или администраторам для доработки.</p>
          <div class="slide-tip">
            <span class="tip-icon">📩</span>
            <span>Мы ответим в течение 24 часов</span>
          </div>
        </div>
      </div>
     
      <!-- Индикаторы карусели -->
      <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>
     
      <!-- Кнопки навигации -->
      <button class="carousel-btn prev" onclick="changeSlide(-1)">❮</button>
      <button class="carousel-btn next" onclick="changeSlide(1)">❯</button>
    </div>
  </div>
 
  <!-- Правила -->
  <div class="rules-text">
    <div class="rules-section">
      <h2>📌 Основные правила</h2>
      <div class="rules-content">
        <p>Эта тема посвящена оформлению ваших анкет. Проекты могут быть разными с разной тематикой, поэтому внимательно изучайте теги шаблонов - они помогут выбрать подходящий вариант для вашей ролевой.</p>
       
        <p>Когда вы выбрали интересующий вас шаблон, нажмите на кнопку "Шаблон", заполните всю необходимую информацию и обязательно допишите важные детали в комментарии:</p>
       
        <ul class="rules-list">
          <li>Какой раздел в анкете кажется лишним</li>
          <li>Каких разделов не хватает</li>
          <li>Какую цветовую палитру использовать</li>
          <li>Особые пожелания по дизайну</li>
          <li>На каком форуме будет размещаться анкета</li>
        </ul>
       
        <p>После этого свяжитесь с модераторами или администраторами - мы переработаем шаблон под ваши нужды и адаптируем под возможности вашего форума.</p>
      </div>
    </div>
   
    <div class="rules-section important">
      <h2>⚠️ Важно!</h2>
      <div class="rules-content">
        <p>Не все форумы поддерживают HTML и некоторые элементы шаблона могут не работать корректно. Перед использованием обязательно протестируйте шаблон на вашем форуме.</p>
       
        <p>Рекомендуем уделить время на подгонку шаблона под возможности форума, где вы планируете размещать анкету. Мы можем помочь с адаптацией под:</p>
       
        <div class="forum-support">
          <div class="support-item">
            <span class="support-icon">✅</span>
            <span>BBCode (большинство форумов)</span>
          </div>
          <div class="support-item">
            <span class="support-icon">✅</span>
            <span>HTML (продвинутые форумы)</span>
          </div>
          <div class="support-item">
            <span class="support-icon">⚠️</span>
            <span>JavaScript (ограниченная поддержка)</span>
          </div>
          <div class="support-item">
            <span class="support-icon">❌</span>
            <span>CSS (только на некоторых форумах)</span>
          </div>
        </div>
       
        <p>Если у вас возникли сложности с установкой шаблона - создайте тему в разделе помощи или обратитесь напрямую к администраторам.</p>
      </div>
    </div>
   
    <div class="rules-section">
      <h2>🎯 Как заказать шаблон</h2>
      <div class="rules-content">
        <div class="order-steps">
          <div class="step">
            <div class="step-number">1</div>
            <div class="step-content">
              <h4>Выберите шаблон</h4>
              <p>Изучите доступные варианты в теме</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">2</div>
            <div class="step-content">
              <h4>Заполните информацию</h4>
              <p>Скопируйте и вставьте свои данные</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">3</div>
            <div class="step-content">
              <h4>Добавьте комментарии</h4>
              <p>Опишите необходимые изменения</p>
            </div>
          </div>
          <div class="step">
            <div class="step-number">4</div>
            <div class="step-content">
              <h4>Отправьте на доработку</h4>
              <p>Свяжитесь с модераторами</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* Основной контейнер */
.rules-container {
  max-width: 1200px;
  margin: 30px auto;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.7);
  border: 2px solid #b8860b;
  font-family: 'Courier New', monospace;
  color: #e0e6ed;
}

/* Заголовок */
.rules-header {
  background: rgba(184, 134, 11, 0.2);
  padding: 30px;
  text-align: center;
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
}

.rules-header h1 {
  color: #d4af37;
  font-size: 2.5em;
  margin: 0 0 10px 0;
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

.rules-header p {
  color: #8b8680;
  font-size: 1.1em;
  margin: 0;
}

/* Основной контент */
.rules-content {
  display: flex;
  padding: 40px;
  gap: 40px;
}

/* Изображение */
.rules-image {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

/* Карусель */
.rules-carousel {
  flex: 1.2;
  position: relative;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  overflow: hidden;
  border: 1px solid rgba(184, 134, 11, 0.2);
}

.carousel-container {
  position: relative;
  height: 400px;
}

.carousel-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
}

.carousel-slide.active {
  opacity: 1;
}

.slide-number {
  font-size: 48px;
  font-weight: bold;
  color: rgba(212, 175, 55, 0.2);
  margin-bottom: 20px;
}

.carousel-slide h3 {
  color: #d4af37;
  font-size: 1.8em;
  margin: 0 0 20px 0;
}

.carousel-slide p {
  color: #e0e6ed;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.slide-tip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(78, 205, 196, 0.1);
  padding: 15px;
  border-radius: 10px;
  border-left: 3px solid #4ecdc4;
  margin-top: auto;
}

.tip-icon {
  font-size: 1.5em;
}

/* Индикаторы карусели */
.carousel-indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s;
}

.indicator.active {
  background: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Кнопки навигации */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(184, 134, 11, 0.2);
  border: 1px solid #b8860b;
  color: #d4af37;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 10;
}

.carousel-btn:hover {
  background: rgba(184, 134, 11, 0.4);
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

.prev {
  left: 15px;
}

.next {
  right: 15px;
}

/* Правила */
.rules-text {
  padding: 0 40px 40px;
}

.rules-section {
  margin-bottom: 30px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  overflow: hidden;
}

.rules-section h2 {
  background: rgba(184, 134, 11, 0.2);
  color: #d4af37;
  padding: 20px 30px;
  margin: 0;
  font-size: 1.5em;
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
}

.rules-content {
  padding: 30px;
}

.rules-content p {
  line-height: 1.8;
  margin-bottom: 20px;
}

.rules-content p:last-child {
  margin-bottom: 0;
}

.rules-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.rules-list li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 15px;
  line-height: 1.6;
}

.rules-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #d4af37;
  font-size: 1.2em;
}

/* Важный раздел */
.important {
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.important h2 {
  background: rgba(255, 107, 107, 0.2);
  color: #ff6b6b;
  border-bottom: 1px solid rgba(255, 107, 107, 0.3);
}

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

.support-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  transition: all 0.3s;
}

.support-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.support-icon {
  font-size: 1.5em;
}

/* Шаги заказа */
.order-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.step {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  transition: all 0.3s;
}

.step:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);
}

.step-number {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  border-radius: 50%;
  color: #0a0e27;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
}

.step-content h4 {
  color: #d4af37;
  margin: 0 0 10px 0;
}

.step-content p {
  color: #8b8680;
  margin: 0;
  font-size: 0.9em;
}

/* Адаптивность */
@media (max-width: 968px) {
  .rules-content {
    flex-direction: column;
  }
 
  .rules-image {
    order: 2;
  }
 
  .rules-carousel {
    order: 1;
    height: 300px;
  }
 
  .carousel-container {
    height: 300px;
  }
 
  .slide-number {
    font-size: 36px;
  }
 
  .carousel-slide h3 {
    font-size: 1.5em;
  }
}

@media (max-width: 768px) {
  .rules-header h1 {
    font-size: 2em;
  }
 
  .rules-content {
    padding: 20px;
  }
 
  .rules-text {
    padding: 0 20px 20px;
  }
 
  .order-steps {
    grid-template-columns: 1fr;
  }
 
  .forum-support {
    grid-template-columns: 1fr;
  }
}
</style>

<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);
}, 5000);
</script>[/html]

2

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

[html]<!-- Теги форума (отдельно от анкеты) -->
<div class="forum-tags">
  <div class="tags-container">
    <span class="tag-title">🎭 Подходит для ролевых:</span>
    <span class="tag">🦸 Суперспособности</span>
    <span class="tag">🌆 Постапокалипсис</span>
    <span class="tag">🤖 Киберпанк</span>
    <span class="tag">⚡ Боевая фантастика</span>
  </div>
</div>

<!-- Анкета персонажа -->
<div class="character-sheet">
  <!-- Заголовок анкеты -->
  <div class="sheet-header">
    <div class="sheet-title">АНКЕТА ПЕРСОНАЖА</div>
  </div>
 
  <!-- Имя персонажа (всегда видно) -->
  <div class="character-name">
    <div class="name-en" contenteditable="true" spellcheck="false">JOHN DOE</div>
    <div class="name-ru" contenteditable="true" spellcheck="false">ДЖОН ДОУ</div>
    <div class="name-edit-hint">💡 Нажмите для редактирования</div>
  </div>
 
  <!-- Изображение (всегда видно) с эффектом загадки -->
  <div class="character-image">
    <div class="image-container">
      <img src="https://i.imgur.com/4A1km4j.png" alt="Персонаж">
      <div class="image-overlay">
        <div class="mystery-text">Тайна этого персонажа...</div>
      </div>
    </div>
    <div class="image-caption" contenteditable="true" spellcheck="false">(фандом) внешность</div>
  </div>
 
  <!-- Кнопка развертывания -->
  <div class="expand-section">
    <button class="expand-btn" onclick="toggleCharacterSheet()">
      <span class="expand-icon">▼</span>
      <span class="expand-text">Показать анкету</span>
    </button>
  </div>
 
  <!-- Скрытая часть анкеты (по умолчанию свернута) -->
  <div class="hidden-content" id="hiddenContent">
    <!-- Основная информация -->
    <div class="character-info">
      <div class="info-toggle" onclick="toggleSection('info')">
        <span class="toggle-icon">▼</span>
        <span>Основная информация</span>
      </div>
      <div class="info-content" id="info-content">
        <div class="quote-section">
          <div class="quote" contenteditable="true" spellcheck="false">«Цитата или песня по желанию»</div>
        </div>
        <div class="info-section">
          <div class="info-item">
            <span class="info-label">возраст, дата рождения:</span>
            <span class="info-value" contenteditable="true" spellcheck="false">ответ</span>
          </div>
          <div class="info-item">
            <span class="info-label">принадлежность:</span>
            <span class="info-value" contenteditable="true" spellcheck="false">ответ</span>
          </div>
          <div class="info-item">
            <span class="info-label">деятельность:</span>
            <span class="info-value" contenteditable="true" spellcheck="false">ответ</span>
          </div>
        </div>
      </div>
    </div>
   
    <!-- История и способности -->
    <div class="character-history">
      <div class="history-toggle" onclick="toggleSection('history')">
        <span class="toggle-icon">▼</span>
        <span>История и способности</span>
      </div>
      <div class="history-content" id="history-content">
        <div class="history-details">
          <div class="detail-item chip-status">
            <span class="detail-label">🧬 чип отсутствует / присутствует.</span>
            <div class="detail-value" contenteditable="true" spellcheck="false">тут пишем как именно персонаж избавился от чипа если его нет в теле.</div>
            <div class="chip-toggle">
              <label class="switch">
                <input type="checkbox" id="chipSwitch">
                <span class="slider"></span>
              </label>
              <span class="chip-label">Чип активен</span>
            </div>
          </div>
          <div class="detail-item powers">
            <span class="detail-label">⚡ способности:</span>
            <div class="detail-value" contenteditable="true" spellcheck="false">ответ</div>
            <div class="power-meter">
              <div class="power-bar">
                <div class="power-fill" style="width: 70%"></div>
              </div>
              <span class="power-level">Уровень силы: 7/10</span>
            </div>
          </div>
          <div class="detail-item">
            <span class="detail-label">📱 связь:</span>
            <div class="detail-value" contenteditable="true" spellcheck="false">ответ</div>
          </div>
        </div>
      </div>
    </div>
   
    <!-- Кнопки действий -->
    <div class="sheet-actions">
      <button class="action-btn" onclick="saveCharacter()">💾 Сохранить анкету</button>
      <button class="action-btn" onclick="resetCharacter()">🔄 Сбросить</button>
      <button class="action-btn" onclick="showTemplate()">📋 Шаблон</button>
    </div>
  </div>
</div>

<!-- Модальное окно для шаблона -->
<div id="templateModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeTemplate()">&times;</span>
    <h2>Шаблон для заполнения</h2>
    <pre><code>ИМЯ ФАМИЛИЯ НА АНГЛ. КАПСОМ
ИМЯ ФАМИЛИЯ НА РУС. КАПСОМ

[ссылка на изображение]

(фандом) внешность

"Цитата или песня по желанию"

возраст, дата рождения: [ответ]
принадлежность: [ответ]
деятельность: [ответ]

история персонажа

чип отсутствует / присутствует. [текст]
способности: [ответ]
связь: [ответ]</code></pre>
  </div>
</div>

<style>
/* Теги форума */
.forum-tags {
  max-width: 800px;
  margin: 20px auto 0;
  text-align: center;
}

.tags-container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: rgba(10, 14, 39, 0.8);
  padding: 12px 20px;
  border-radius: 30px;
  border: 1px solid rgba(184, 134, 11, 0.3);
}

.tag-title {
  color: #d4af37;
  font-weight: bold;
  margin-right: 5px;
}

.tag {
  display: inline-block;
  background: rgba(78, 205, 196, 0.2);
  color: #4ecdc4;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  border: 1px solid rgba(78, 205, 196, 0.3);
  transition: all 0.3s;
}

.tag:hover {
  background: rgba(78, 205, 196, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(78, 205, 196, 0.3);
}

/* Анкета персонажа */
.character-sheet {
  max-width: 800px;
  margin: 20px auto;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.7);
  border: 2px solid #b8860b;
  font-family: 'Courier New', monospace;
  color: #e0e6ed;
  position: relative;
}

/* Анимированный фон */
.character-sheet::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(184, 134, 11, 0.05) 0%, transparent 70%);
  animation: pulse 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Заголовок анкеты */
.sheet-header {
  background: rgba(184, 134, 11, 0.2);
  padding: 15px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
}

.sheet-title {
  color: #d4af37;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Имя персонажа */
.character-name {
  text-align: center;
  padding: 25px 20px 15px;
  background: rgba(184, 134, 11, 0.1);
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
  position: relative;
}

.name-en {
  font-size: 32px;
  font-weight: bold;
  color: #d4af37;
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
  letter-spacing: 3px;
  margin-bottom: 5px;
  transition: all 0.3s;
  cursor: text;
}

.name-en:hover {
  text-shadow: 0 0 25px rgba(212, 175, 55, 0.8);
  transform: scale(1.05);
}

.name-ru {
  font-size: 16px;
  color: #8b8680;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s;
  cursor: text;
}

.name-ru:hover {
  color: #d4af37;
}

.name-edit-hint {
  font-size: 12px;
  color: #4ecdc4;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.character-name:hover .name-edit-hint {
  opacity: 1;
}

/* Изображение с эффектом загадки */
.character-image {
  text-align: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
}

.image-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.character-image img {
  max-width: 100%;
  max-height: 400px;
  border-radius: 10px;
  border: 3px solid #b8860b;
  box-shadow: 0 8px 25px rgba(184, 134, 11, 0.3);
  transition: all 0.3s;
  filter: brightness(0.8);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
  pointer-events: none;
}

.mystery-text {
  color: #d4af37;
  font-size: 18px;
  font-style: italic;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  opacity: 0.8;
}

.image-caption {
  margin-top: 15px;
  font-size: 14px;
  color: #8b8680;
  font-style: italic;
  cursor: text;
  transition: all 0.3s;
}

.image-caption:hover {
  color: #d4af37;
}

/* Кнопка развертывания */
.expand-section {
  padding: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(184, 134, 11, 0.2);
}

.expand-btn {
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  color: #0a0e27;
  border: none;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

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

.expand-icon {
  transition: transform 0.3s;
}

/* Скрытая часть */
.hidden-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.hidden-content.expanded {
  max-height: 2000px;
}

/* Основная информация */
.character-info {
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(184, 134, 11, 0.2);
}

.info-toggle {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}

.info-toggle:hover {
  background: rgba(184, 134, 11, 0.1);
}

.toggle-icon {
  margin-right: 10px;
  transition: transform 0.3s;
}

.info-content {
  padding: 20px 30px;
  display: flex;
  align-items: center;
}

.quote-section {
  flex: 1;
  text-align: right;
  padding-right: 30px;
}

.quote {
  font-size: 16px;
  font-style: italic;
  color: #4ecdc4;
  position: relative;
  padding: 0 20px;
  cursor: text;
  transition: all 0.3s;
}

.quote:hover {
  color: #d4af37;
}

.quote::before,
.quote::after {
  content: '"';
  font-size: 28px;
  color: #b8860b;
  position: absolute;
}

.quote::before {
  left: 0;
  top: -5px;
}

.quote::after {
  right: 0;
  bottom: -15px;
}

.info-section {
  flex: 1.5;
}

.info-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-weight: bold;
  color: #d4af37;
  margin-right: 10px;
  white-space: nowrap;
  min-width: 180px;
}

.info-value {
  color: #e0e6ed;
  cursor: text;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s;
}

.info-value:hover {
  background: rgba(184, 134, 11, 0.1);
}

/* История и способности */
.character-history {
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(184, 134, 11, 0.2);
}

.history-toggle {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}

.history-toggle:hover {
  background: rgba(184, 134, 11, 0.1);
}

.history-content {
  padding: 25px 30px;
}

.history-details {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  padding: 20px;
  border: 1px solid rgba(184, 134, 11, 0.2);
}

.detail-item {
  margin-bottom: 25px;
  position: relative;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-label {
  display: block;
  font-weight: bold;
  color: #d4af37;
  margin-bottom: 10px;
  font-size: 16px;
}

.detail-value {
  color: #e0e6ed;
  line-height: 1.6;
  padding: 15px;
  border-left: 4px solid #4ecdc4;
  background: rgba(78, 205, 196, 0.05);
  border-radius: 0 8px 8px 0;
  cursor: text;
  transition: all 0.3s;
}

.detail-value:hover {
  background: rgba(78, 205, 196, 0.1);
  border-left-color: #d4af37;
}

/* Статус чипа */
.chip-status {
  background: linear-gradient(90deg, rgba(184, 134, 11, 0.1) 0%, transparent 100%);
  padding: 15px;
  border-radius: 8px;
}

.chip-toggle {
  margin-top: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.chip-label {
  color: #8b8680;
  font-size: 14px;
}

/* Способности */
.powers {
  background: linear-gradient(90deg, rgba(78, 205, 196, 0.1) 0%, transparent 100%);
  padding: 15px;
  border-radius: 8px;
}

.power-meter {
  margin-top: 15px;
}

.power-bar {
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  overflow: hidden;
}

.power-fill {
  height: 100%;
  background: linear-gradient(90deg, #4ecdc4 0%, #44a08d 100%);
  border-radius: 5px;
  transition: width 1s ease;
}

.power-level {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #4ecdc4;
}

/* Кнопки действий */
.sheet-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  background: rgba(184, 134, 11, 0.1);
  border-top: 1px solid rgba(184, 134, 11, 0.3);
}

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

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

/* Модальное окно */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  animation: fadeIn 0.3s;
}

.modal-content {
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
  margin: 5% auto;
  padding: 30px;
  border: 2px solid #b8860b;
  border-radius: 15px;
  width: 80%;
  max-width: 600px;
  position: relative;
  animation: slideIn 0.3s;
}

.close {
  color: #d4af37;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.close:hover {
  color: #ff6b6b;
}

.modal-content h2 {
  color: #d4af37;
  text-align: center;
  margin-bottom: 20px;
}

.modal-content pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #4ecdc4;
  overflow-x: auto;
}

/* Анимации */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Адаптивность */
@media (max-width: 768px) {
  .info-content {
    flex-direction: column;
    text-align: center;
  }
 
  .quote-section {
    text-align: center;
    padding-right: 0;
    margin-bottom: 20px;
  }
 
  .info-item {
    flex-direction: column;
    text-align: center;
  }
 
  .info-label {
    margin-right: 0;
    margin-bottom: 5px;
    min-width: auto;
  }
 
  .sheet-actions {
    flex-direction: column;
  }
 
  .action-btn {
    width: 100%;
  }
}
</style>

<script>
// Переключение всей анкеты
function toggleCharacterSheet() {
  const hiddenContent = document.getElementById('hiddenContent');
  const expandBtn = document.querySelector('.expand-btn');
  const expandIcon = document.querySelector('.expand-icon');
  const expandText = document.querySelector('.expand-text');
 
  if (hiddenContent.classList.contains('expanded')) {
    hiddenContent.classList.remove('expanded');
    expandIcon.style.transform = 'rotate(0deg)';
    expandText.textContent = 'Показать анкету';
  } else {
    hiddenContent.classList.add('expanded');
    expandIcon.style.transform = 'rotate(180deg)';
    expandText.textContent = 'Скрыть анкету';
   
    // Анимация индикатора силы после развертывания
    setTimeout(() => {
      document.querySelector('.power-fill').style.width = '70%';
    }, 300);
  }
}

// Переключение секций
function toggleSection(section) {
  const content = document.getElementById(section + '-content');
  const icon = document.querySelector(`.${section}-toggle .toggle-icon`);
 
  if (content.style.display === 'none') {
    content.style.display = 'block';
    icon.style.transform = 'rotate(0deg)';
  } else {
    content.style.display = 'none';
    icon.style.transform = 'rotate(-90deg)';
  }
}

// Сохранение анкеты
function saveCharacter() {
  const characterData = {
    nameEn: document.querySelector('.name-en').textContent,
    nameRu: document.querySelector('.name-ru').textContent,
    imageCaption: document.querySelector('.image-caption').textContent,
    quote: document.querySelector('.quote').textContent,
    age: document.querySelectorAll('.info-value')[0].textContent,
    affiliation: document.querySelectorAll('.info-value')[1].textContent,
    activity: document.querySelectorAll('.info-value')[2].textContent,
    chip: document.querySelectorAll('.detail-value')[0].textContent,
    powers: document.querySelectorAll('.detail-value')[1].textContent,
    contact: document.querySelectorAll('.detail-value')[2].textContent
  };
 
  localStorage.setItem('characterSheet', JSON.stringify(characterData));
 
  // Визуальное подтверждение
  const btn = event.target;
  const originalText = btn.textContent;
  btn.textContent = '✅ Сохранено!';
  btn.style.background = 'linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%)';
 
  setTimeout(() => {
    btn.textContent = originalText;
    btn.style.background = '';
  }, 2000);
}

// Сброс анкеты
function resetCharacter() {
  if (confirm('Вы уверены, что хотите сбросить все изменения?')) {
    location.reload();
  }
}

// Показать шаблон
function showTemplate() {
  document.getElementById('templateModal').style.display = 'block';
}

// Закрыть шаблон
function closeTemplate() {
  document.getElementById('templateModal').style.display = 'none';
}

// Закрытие модального окна при клике вне его
window.onclick = function(event) {
  const modal = document.getElementById('templateModal');
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}

// Инициализация при загрузке
document.addEventListener('DOMContentLoaded', function() {
  // Загрузка сохраненных данных
  const savedData = localStorage.getItem('characterSheet');
  if (savedData) {
    const data = JSON.parse(savedData);
    document.querySelector('.name-en').textContent = data.nameEn;
    document.querySelector('.name-ru').textContent = data.nameRu;
    document.querySelector('.image-caption').textContent = data.imageCaption;
    document.querySelector('.quote').textContent = data.quote;
    document.querySelectorAll('.info-value')[0].textContent = data.age;
    document.querySelectorAll('.info-value')[1].textContent = data.affiliation;
    document.querySelectorAll('.info-value')[2].textContent = data.activity;
    document.querySelectorAll('.detail-value')[0].textContent = data.chip;
    document.querySelectorAll('.detail-value')[1].textContent = data.powers;
    document.querySelectorAll('.detail-value')[2].textContent = data.contact;
  }
 
  // По умолчанию сворачиваем секции внутри анкеты
  document.getElementById('info-content').style.display = 'none';
  document.getElementById('history-content').style.display = 'none';
  document.querySelector('.info-toggle .toggle-icon').style.transform = 'rotate(-90deg)';
  document.querySelector('.history-toggle .toggle-icon').style.transform = 'rotate(-90deg)';
});
</script>[/html]

3

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

[html]<!-- Теги форума -->
<div class="forum-tags">
  <div class="tags-container">
    <span class="tag-title">🎭 Подходит для ролевых:</span>
    <span class="tag">🧙 Фентези</span>
    <span class="tag">📜 По старому Фандому</span>
    <span class="tag">👑 Ранги\звания</span>
  </div>
</div>

<!-- Анкета персонажа -->
<div class="character-sheet">
  <!-- Заголовок с типом форума -->
  <div class="sheet-header">
    <div class="sheet-title">АНКЕТА ПЕРСОНАЖА</div>
  </div>
 
  <!-- Имя персонажа (всегда видно) -->
  <div class="character-name">
    <div class="name-en" contenteditable="true" spellcheck="false">CHARACTER NAME</div>
    <div class="name-ru" contenteditable="true" spellcheck="false">ИМЯ ПЕРСОНАЖА</div>
    <div class="name-edit-hint">💡 Нажмите для редактирования</div>
  </div>
 
  <!-- Изображение (всегда видно) с эффектом загадки -->
  <div class="character-image">
    <div class="image-container">
      <img src="https://i.imgur.com/4A1km4j.png" alt="Персонаж">
      <div class="image-overlay">
        <div class="mystery-text">Тайна этого персонажа...</div>
      </div>
    </div>
    <div class="image-caption" contenteditable="true" spellcheck="false">(фандом) внешность</div>
  </div>
 
  <!-- Кнопка развертывания -->
  <div class="expand-section">
    <button class="expand-btn" onclick="toggleCharacterSheet()">
      <span class="expand-icon">▼</span>
      <span class="expand-text">Показать анкету</span>
    </button>
  </div>
 
  <!-- Скрытая часть анкеты (по умолчанию свернута) -->
  <div class="hidden-content" id="hiddenContent">
    <!-- Основная информация -->
    <div class="character-info">
      <div class="info-toggle" onclick="toggleSection('info')">
        <span class="toggle-icon">▼</span>
        <span>Основная информация</span>
      </div>
      <div class="info-content" id="info-content">
        <div class="info-grid">
          <div class="info-item">
            <span class="info-number">1</span>
            <span class="info-label">Имя, фамилия</span>
            <span class="info-value" contenteditable="true" spellcheck="false">ответ</span>
          </div>
          <div class="info-item">
            <span class="info-number">2</span>
            <span class="info-label">Раса и звание</span>
            <span class="info-value" contenteditable="true" spellcheck="false">ответ</span>
          </div>
          <div class="info-item">
            <span class="info-number">3</span>
            <span class="info-label">Возраст</span>
            <span class="info-value" contenteditable="true" spellcheck="false">ответ</span>
          </div>
          <div class="info-item">
            <span class="info-number">4</span>
            <span class="info-label">Внешность</span>
            <span class="info-value" contenteditable="true" spellcheck="false">ответ</span>
          </div>
        </div>
      </div>
    </div>
   
    <!-- Дополнительная информация -->
    <div class="character-details">
      <div class="details-toggle" onclick="toggleSection('details')">
        <span class="toggle-icon">▼</span>
        <span>Характер и способности</span>
      </div>
      <div class="details-content" id="details-content">
        <div class="details-grid">
          <div class="detail-item">
            <span class="detail-number">5</span>
            <div class="detail-content">
              <span class="detail-label">Характер</span>
              <div class="detail-value" contenteditable="true" spellcheck="false">ответ</div>
            </div>
          </div>
          <div class="detail-item">
            <span class="detail-number">6</span>
            <div class="detail-content">
              <span class="detail-label">Способности и навыки</span>
              <div class="detail-value" contenteditable="true" spellcheck="false">ответ</div>
              <div class="skill-meter">
                <div class="skill-bar">
                  <div class="skill-fill"></div>
                </div>
                <span class="skill-level">Уровень мастерства: 0/10</span>
              </div>
            </div>
          </div>
          <div class="detail-item">
            <span class="detail-number">7</span>
            <div class="detail-content">
              <span class="detail-label">Связь с Вами (ВК или Телеграмм)</span>
              <div class="detail-value" contenteditable="true" spellcheck="false">ответ</div>
            </div>
          </div>
        </div>
      </div>
    </div>
   
    <!-- Пробный пост (отдельный свернутый раздел) -->
    <div class="sample-post-section">
      <div class="sample-post-toggle" onclick="toggleSection('samplePost')">
        <span class="toggle-icon">▼</span>
        <span>Пробный пост</span>
      </div>
      <div class="sample-post-content" id="samplePost-content">
        <div class="sample-post-container">
          <div class="sample-post-header">
            <span class="post-number">8</span>
            <span class="post-label">Пробный пост</span>
          </div>
          <div class="sample-post-value" contenteditable="true" spellcheck="false">
            Здесь должен быть ваш пробный пост. Напишите отрывок игры от лица вашего персонажа, чтобы мастера могли оценить ваш стиль игры.
          </div>
          <div class="post-stats">
            <span class="post-length">Символов: <span id="charCount">0</span></span>
            <span class="post-words">Слов: <span id="wordCount">0</span></span>
          </div>
        </div>
      </div>
    </div>
   
    <!-- Кнопки действий -->
    <div class="sheet-actions">
      <button class="action-btn" onclick="saveCharacter()">💾 Сохранить анкету</button>
      <button class="action-btn" onclick="resetCharacter()">🔄 Сбросить</button>
      <button class="action-btn" onclick="showTemplate()">📋 Шаблон</button>
    </div>
  </div>
</div>

<!-- Модальное окно для шаблона -->
<div id="templateModal" class="modal">
  <div class="modal-content">
    <span class="close" onclick="closeTemplate()">&times;</span>
    <h2>Шаблон для заполнения</h2>
    <pre><code>1. Имя, фамилия
[ответ]

2. Раса и звание
[ответ]

3. Возраст
[ответ]

4. Внешность
[ответ]

5. Характер
[ответ]

6. Способности и навыки
[ответ]

7. Связь с Вами (ВК или Телеграмм)
[ответ]

8. Пробный пост
[Ваш пробный пост]</code></pre>
  </div>
</div>

<style>
/* Теги форума */
.forum-tags {
  max-width: 800px;
  margin: 20px auto 0;
  text-align: center;
}

.tags-container {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: rgba(10, 14, 39, 0.8);
  padding: 12px 20px;
  border-radius: 30px;
  border: 1px solid rgba(184, 134, 11, 0.3);
}

.tag-title {
  color: #d4af37;
  font-weight: bold;
  margin-right: 5px;
}

.tag {
  display: inline-block;
  background: rgba(184, 134, 11, 0.2);
  color: #d4af37;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  border: 1px solid rgba(184, 134, 11, 0.3);
  transition: all 0.3s;
}

.tag:hover {
  background: rgba(184, 134, 11, 0.3);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3);
}

/* Анкета персонажа */
.character-sheet {
  max-width: 800px;
  margin: 20px auto;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0,0,0,0.7);
  border: 2px solid #b8860b;
  font-family: 'Courier New', monospace;
  color: #e0e6ed;
  position: relative;
}

/* Анимированный фон */
.character-sheet::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(184, 134, 11, 0.05) 0%, transparent 70%);
  animation: pulse 15s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Заголовок анкеты */
.sheet-header {
  background: rgba(184, 134, 11, 0.2);
  padding: 15px 20px;
  text-align: center;
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
}

.sheet-title {
  color: #d4af37;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Имя персонажа */
.character-name {
  text-align: center;
  padding: 25px 20px 15px;
  background: rgba(184, 134, 11, 0.1);
  border-bottom: 1px solid rgba(184, 134, 11, 0.3);
  position: relative;
}

.name-en {
  font-size: 32px;
  font-weight: bold;
  color: #d4af37;
  text-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
  letter-spacing: 3px;
  margin-bottom: 5px;
  transition: all 0.3s;
  cursor: text;
}

.name-en:hover {
  text-shadow: 0 0 25px rgba(212, 175, 55, 0.8);
  transform: scale(1.05);
}

.name-ru {
  font-size: 16px;
  color: #8b8680;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s;
  cursor: text;
}

.name-ru:hover {
  color: #d4af37;
}

.name-edit-hint {
  font-size: 12px;
  color: #4ecdc4;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 0.3s;
}

.character-name:hover .name-edit-hint {
  opacity: 1;
}

/* Изображение с эффектом загадки */
.character-image {
  text-align: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
}

.image-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.character-image img {
  max-width: 100%;
  max-height: 400px;
  border-radius: 10px;
  border: 3px solid #b8860b;
  box-shadow: 0 8px 25px rgba(184, 134, 11, 0.3);
  transition: all 0.3s;
  filter: brightness(0.8);
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
  border-radius: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 20px;
  pointer-events: none;
}

.mystery-text {
  color: #d4af37;
  font-size: 18px;
  font-style: italic;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
  opacity: 0.8;
}

.image-caption {
  margin-top: 15px;
  font-size: 14px;
  color: #8b8680;
  font-style: italic;
  cursor: text;
  transition: all 0.3s;
}

.image-caption:hover {
  color: #d4af37;
}

/* Кнопка развертывания */
.expand-section {
  padding: 20px;
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(184, 134, 11, 0.2);
}

.expand-btn {
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  color: #0a0e27;
  border: none;
  border-radius: 30px;
  padding: 12px 30px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

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

.expand-icon {
  transition: transform 0.3s;
}

/* Скрытая часть */
.hidden-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.hidden-content.expanded {
  max-height: 2000px;
}

/* Основная информация */
.character-info {
  background: rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(184, 134, 11, 0.2);
}

.info-toggle {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}

.info-toggle:hover {
  background: rgba(184, 134, 11, 0.1);
}

.toggle-icon {
  margin-right: 10px;
  transition: transform 0.3s;
}

.info-content {
  padding: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.info-item {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 15px;
  border-left: 3px solid #d4af37;
  transition: all 0.3s;
}

.info-item:hover {
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(184, 134, 11, 0.2);
}

.info-number {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  border-radius: 50%;
  color: #0a0e27;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  margin-bottom: 10px;
}

.info-label {
  display: block;
  color: #d4af37;
  font-weight: bold;
  margin-bottom: 8px;
}

.info-value {
  color: #e0e6ed;
  cursor: text;
  padding: 5px;
  border-radius: 4px;
  transition: all 0.3s;
}

.info-value:hover {
  background: rgba(184, 134, 11, 0.1);
}

/* Дополнительная информация */
.character-details {
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(184, 134, 11, 0.2);
}

.details-toggle {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}

.details-toggle:hover {
  background: rgba(184, 134, 11, 0.1);
}

.details-content {
  padding: 20px;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.detail-item {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 15px;
  border-left: 3px solid #d4af37;
  transition: all 0.3s;
}

.detail-item:hover {
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(184, 134, 11, 0.2);
}

.detail-number {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  border-radius: 50%;
  color: #0a0e27;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
  margin-bottom: 10px;
}

.detail-label {
  display: block;
  color: #d4af37;
  font-weight: bold;
  margin-bottom: 8px;
}

.detail-value {
  color: #e0e6ed;
  line-height: 1.6;
  cursor: text;
  padding: 10px;
  border-radius: 4px;
  transition: all 0.3s;
  min-height: 60px;
}

.detail-value:hover {
  background: rgba(184, 134, 11, 0.1);
}

/* Индикатор навыков */
.skill-meter {
  margin-top: 15px;
}

.skill-bar {
  width: 100%;
  height: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  overflow: hidden;
}

.skill-fill {
  height: 100%;
  background: linear-gradient(90deg, #b8860b 0%, #d4af37 50%, #f4e19c 100%);
  border-radius: 5px;
  width: 0%;
  transition: width 1s ease;
}

.skill-level {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: #d4af37;
}

/* Пробный пост */
.sample-post-section {
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(184, 134, 11, 0.2);
}

.sample-post-toggle {
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: all 0.3s;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}

.sample-post-toggle:hover {
  background: rgba(184, 134, 11, 0.1);
}

.sample-post-content {
  padding: 20px;
}

.sample-post-container {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  border: 1px solid rgba(184, 134, 11, 0.2);
  overflow: hidden;
}

.sample-post-header {
  background: rgba(184, 134, 11, 0.2);
  padding: 15px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}

.post-number {
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  border-radius: 50%;
  color: #0a0e27;
  font-weight: bold;
  text-align: center;
  line-height: 30px;
}

.post-label {
  color: #d4af37;
  font-weight: bold;
  font-size: 16px;
}

.sample-post-value {
  padding: 20px;
  min-height: 150px;
  line-height: 1.8;
  color: #e0e6ed;
  cursor: text;
  transition: all 0.3s;
}

.sample-post-value:hover {
  background: rgba(184, 134, 11, 0.05);
}

.sample-post-value:focus {
  outline: none;
  background: rgba(184, 134, 11, 0.1);
  border-radius: 5px;
}

.post-stats {
  background: rgba(0, 0, 0, 0.3);
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  font-size: 14px;
  color: #8b8680;
}

.post-length, .post-words {
  display: flex;
  align-items: center;
  gap: 5px;
}

.post-length span, .post-words span {
  color: #d4af37;
  font-weight: bold;
}

/* Кнопки действий */
.sheet-actions {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 20px;
  background: rgba(184, 134, 11, 0.1);
  border-top: 1px solid rgba(184, 134, 11, 0.3);
}

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

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

/* Модальное окно */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  animation: fadeIn 0.3s;
}

.modal-content {
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
  margin: 5% auto;
  padding: 30px;
  border: 2px solid #b8860b;
  border-radius: 15px;
  width: 80%;
  max-width: 600px;
  position: relative;
  animation: slideIn 0.3s;
}

.close {
  color: #d4af37;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
}

.close:hover {
  color: #ff6b6b;
}

.modal-content h2 {
  color: #d4af37;
  text-align: center;
  margin-bottom: 20px;
}

.modal-content pre {
  background: rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #d4af37;
  overflow-x: auto;
}

/* Анимации */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Адаптивность */
@media (max-width: 768px) {
  .info-grid,
  .details-grid {
    grid-template-columns: 1fr;
  }
 
  .sheet-actions {
    flex-direction: column;
  }
 
  .action-btn {
    width: 100%;
  }
 
  .post-stats {
    flex-direction: column;
    gap: 10px;
  }
}
</style>

<script>
// Переключение всей анкеты
function toggleCharacterSheet() {
  const hiddenContent = document.getElementById('hiddenContent');
  const expandBtn = document.querySelector('.expand-btn');
  const expandIcon = document.querySelector('.expand-icon');
  const expandText = document.querySelector('.expand-text');
 
  if (hiddenContent.classList.contains('expanded')) {
    hiddenContent.classList.remove('expanded');
    expandIcon.style.transform = 'rotate(0deg)';
    expandText.textContent = 'Показать анкету';
  } else {
    hiddenContent.classList.add('expanded');
    expandIcon.style.transform = 'rotate(180deg)';
    expandText.textContent = 'Скрыть анкету';
   
    // Анимация индикатора навыков после развертывания
    setTimeout(() => {
      document.querySelector('.skill-fill').style.width = '70%';
    }, 300);
  }
}

// Переключение секций
function toggleSection(section) {
  const content = document.getElementById(section + '-content');
  const icon = document.querySelector(`.${section}-toggle .toggle-icon`);
 
  if (content.style.display === 'none') {
    content.style.display = 'block';
    icon.style.transform = 'rotate(0deg)';
  } else {
    content.style.display = 'none';
    icon.style.transform = 'rotate(-90deg)';
  }
}

// Подсчет символов и слов в пробном посте
function updatePostStats() {
  const samplePost = document.querySelector('.sample-post-value');
  const text = samplePost.textContent;
 
  // Подсчет символов
  const charCount = text.length;
  document.getElementById('charCount').textContent = charCount;
 
  // Подсчет слов
  const words = text.trim().split(/\s+/).filter(word => word.length > 0);
  const wordCount = words.length;
  document.getElementById('wordCount').textContent = wordCount;
}

// Сохранение анкеты
function saveCharacter() {
  const characterData = {
    name: document.querySelectorAll('.info-value')[0].textContent,
    race: document.querySelectorAll('.info-value')[1].textContent,
    age: document.querySelectorAll('.info-value')[2].textContent,
    appearance: document.querySelectorAll('.info-value')[3].textContent,
    character: document.querySelectorAll('.detail-value')[0].textContent,
    skills: document.querySelectorAll('.detail-value')[1].textContent,
    contact: document.querySelectorAll('.detail-value')[2].textContent,
    samplePost: document.querySelector('.sample-post-value').textContent
  };
 
  localStorage.setItem('fantasyCharacter', JSON.stringify(characterData));
 
  // Анимация индикатора навыков
  const skillFill = document.querySelector('.skill-fill');
  const skillLevel = document.querySelector('.skill-level');
  const randomLevel = Math.floor(Math.random() * 10) + 1;
 
  skillFill.style.width = (randomLevel * 10) + '%';
  skillLevel.textContent = `Уровень мастерства: ${randomLevel}/10`;
 
  // Визуальное подтверждение
  const btn = event.target;
  const originalText = btn.textContent;
  btn.textContent = '✅ Сохранено!';
  btn.style.background = 'linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%)';
 
  setTimeout(() => {
    btn.textContent = originalText;
    btn.style.background = '';
  }, 2000);
}

// Сброс анкеты
function resetCharacter() {
  if (confirm('Вы уверены, что хотите сбросить все изменения?')) {
    location.reload();
  }
}

// Показать шаблон
function showTemplate() {
  document.getElementById('templateModal').style.display = 'block';
}

// Закрыть шаблон
function closeTemplate() {
  document.getElementById('templateModal').style.display = 'none';
}

// Закрытие модального окна при клике вне его
window.onclick = function(event) {
  const modal = document.getElementById('templateModal');
  if (event.target == modal) {
    modal.style.display = 'none';
  }
}

// Инициализация при загрузке
document.addEventListener('DOMContentLoaded', function() {
  // Загрузка сохраненных данных
  const savedData = localStorage.getItem('fantasyCharacter');
  if (savedData) {
    const data = JSON.parse(savedData);
    document.querySelectorAll('.info-value')[0].textContent = data.name;
    document.querySelectorAll('.info-value')[1].textContent = data.race;
    document.querySelectorAll('.info-value')[2].textContent = data.age;
    document.querySelectorAll('.info-value')[3].textContent = data.appearance;
    document.querySelectorAll('.detail-value')[0].textContent = data.character;
    document.querySelectorAll('.detail-value')[1].textContent = data.skills;
    document.querySelectorAll('.detail-value')[2].textContent = data.contact;
    document.querySelector('.sample-post-value').textContent = data.samplePost;
  }
 
  // По умолчанию сворачиваем секции
  document.getElementById('info-content').style.display = 'none';
  document.getElementById('details-content').style.display = 'none';
  document.getElementById('samplePost-content').style.display = 'none';
  document.querySelector('.info-toggle .toggle-icon').style.transform = 'rotate(-90deg)';
  document.querySelector('.details-toggle .toggle-icon').style.transform = 'rotate(-90deg)';
  document.querySelector('.sample-post-toggle .toggle-icon').style.transform = 'rotate(-90deg)';
 
  // Добавляем обработчик для подсчета статистики пробного поста
  const samplePost = document.querySelector('.sample-post-value');
  samplePost.addEventListener('input', updatePostStats);
 
  // Инициализация статистики
  updatePostStats();
});
</script>[/html]

4

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

[html]<div class="episode-container">
  <!-- Арт эпизода сверху -->
  <div class="episode-art-header">
    <div class="art-background">
      <img src="https://upforme.ru/uploads/001c/1f/11/2/431225.png" alt="Эпизод">
      <div class="art-overlay"></div>
    </div>
    <div class="episode-title-overlay">
      <h1>Название эпизода</h1>
      <div class="episode-subtitle">Глава истории</div>
    </div>
  </div>
 
  <!-- Основная информация -->
  <div class="episode-info">
    <!-- Игроки -->
    <div class="info-card players">
      <div class="card-icon">🧑‍🤝‍🧑</div>
      <div class="card-content">
        <div class="card-label">Участники</div>
        <div class="card-value">
          <span class="player-tag">Игрок 1</span>
          <span class="player-tag">Игрок 2</span>
          <span class="player-tag">Игрок 3</span>
        </div>
      </div>
    </div>
   
    <!-- Время -->
    <div class="info-card time">
      <div class="card-icon">🕯️</div>
      <div class="card-content">
        <div class="card-label">Время</div>
        <div class="card-value">Полночь, 00:00</div>
      </div>
    </div>
   
    <!-- Место -->
    <div class="info-card location">
      <div class="card-icon">🏚️</div>
      <div class="card-content">
        <div class="card-label">Место</div>
        <div class="card-value">Заброшенный особняк</div>
      </div>
    </div>
  </div>
 
  <!-- Описание эпизода -->
  <div class="episode-description">
    <div class="description-header" onclick="toggleDescription()">
      <span class="description-title">Краткое описание</span>
      <span class="toggle-icon">▼</span>
    </div>
    <div class="description-content" id="descriptionContent">
      <p>Группа искателей приключений пробирается через заброшенный особняк, где по легендам обитают призраки прошлых владельцев. Каждая комната таит в себе опасности, а за углом может скрываться что угодно.</p>
      <p>Им предстоит разгадать тайну исчезновения семьи, которая когда-то жила в этих стенах, но темные силы не хотят отпускать своих гостей...</p>
    </div>
  </div>
 
  <!-- Кнопки действий -->
  <div class="episode-actions">
    <button class="action-btn">Присоединиться к эпизоду</button>
    <button class="action-btn secondary">Следить за развитием</button>
  </div>
</div>

<style>
/* Основной контейнер */
.episode-container {
  max-width: 900px;
  margin: 30px auto;
  background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
  border: 2px solid #b8860b;
  font-family: 'Courier New', monospace;
  color: #e0e6ed;
  position: relative;
}

/* Анимированный фон */
.episode-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(184, 134, 11, 0.05) 0%, transparent 70%);
  animation: pulse 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.1); opacity: 0.8; }
}

/* Арт в шапке */
.episode-art-header {
  position: relative;
  height: 350px;
  overflow: hidden;
}

.art-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.art-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.1);
  transition: all 0.5s;
}

.episode-container:hover .art-background img {
  transform: scale(1.02);
  filter: brightness(0.8) contrast(1.2);
}

.art-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%);
}

/* Название эпизода слева */
.episode-title-overlay {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  text-align: left;
  z-index: 10;
  max-width: 60%;
}

.episode-title-overlay h1 {
  color: #d4af37;
  font-size: 2.8em;
  margin: 0;
  text-shadow: 0 0 20px rgba(0,0,0,0.8);
  animation: titleGlow 3s ease-in-out infinite;
  letter-spacing: 1px;
  line-height: 1.2;
}

@keyframes titleGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(0,0,0,0.8), 0 0 30px rgba(212, 175, 55, 0.4); }
  50% { text-shadow: 0 0 30px rgba(0,0,0,0.9), 0 0 40px rgba(212, 175, 55, 0.8); }
}

.episode-subtitle {
  color: #8b8680;
  font-size: 1.1em;
  margin-top: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Информационные карточки */
.episode-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 30px;
  background: rgba(0, 0, 0, 0.2);
}

.info-card {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 15px;
  padding: 20px;
  border: 1px solid rgba(184, 134, 11, 0.2);
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(184, 134, 11, 0.1), transparent);
  transition: left 0.5s;
}

.info-card:hover::before {
  left: 100%;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(184, 134, 11, 0.2);
  border-color: #d4af37;
}

.card-icon {
  font-size: 2.5em;
  animation: iconPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(184, 134, 11, 0.3));
}

@keyframes iconPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.card-content {
  flex: 1;
}

.card-label {
  color: #8b8680;
  font-size: 0.9em;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.card-value {
  color: #e0e6ed;
  font-size: 1.1em;
  font-weight: bold;
}

.player-tag {
  display: inline-block;
  background: rgba(78, 205, 196, 0.2);
  color: #4ecdc4;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.9em;
  margin: 2px;
  border: 1px solid rgba(78, 205, 196, 0.3);
}

/* Описание */
.episode-description {
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid rgba(184, 134, 11, 0.2);
}

.description-header {
  padding: 20px 30px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  border-bottom: 1px solid rgba(184, 134, 11, 0.2);
}

.description-header:hover {
  background: rgba(184, 134, 11, 0.1);
}

.description-title {
  color: #d4af37;
  font-size: 1.2em;
  font-weight: bold;
}

.toggle-icon {
  color: #8b8680;
  transition: transform 0.3s;
}

.description-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.description-content.expanded {
  max-height: 500px;
}

.description-content p {
  padding: 20px 30px;
  line-height: 1.8;
  margin: 0;
  color: #e0e6ed;
}

.description-content p:first-child {
  padding-top: 30px;
}

.description-content p:last-child {
  padding-bottom: 30px;
}

/* Кнопки действий */
.episode-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 30px;
  background: rgba(184, 134, 11, 0.1);
  border-top: 1px solid rgba(184, 134, 11, 0.3);
}

.action-btn {
  background: linear-gradient(135deg, #b8860b 0%, #d4af37 100%);
  color: #0a0e27;
  border: none;
  border-radius: 30px;
  padding: 15px 30px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(184, 134, 11, 0.3);
  font-size: 1.1em;
}

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

.action-btn.secondary {
  background: rgba(78, 205, 196, 0.2);
  color: #4ecdc4;
  border: 1px solid rgba(78, 205, 196, 0.3);
}

.action-btn.secondary:hover {
  background: rgba(78, 205, 196, 0.3);
}

/* Адаптивность */
@media (max-width: 768px) {
  .episode-art-header {
    height: 250px;
  }
 
  .episode-title-overlay {
    left: 20px;
    max-width: 80%;
  }
 
  .episode-title-overlay h1 {
    font-size: 2em;
  }
 
  .episode-subtitle {
    font-size: 0.9em;
  }
 
  .episode-info {
    grid-template-columns: 1fr;
  }
 
  .episode-actions {
    flex-direction: column;
  }
 
  .action-btn {
    width: 100%;
  }
}
</style>

<script>
function toggleDescription() {
  const content = document.getElementById('descriptionContent');
  const icon = document.querySelector('.toggle-icon');
 
  if (content.classList.contains('expanded')) {
    content.classList.remove('expanded');
    icon.style.transform = 'rotate(0deg)';
  } else {
    content.classList.add('expanded');
    icon.style.transform = 'rotate(180deg)';
  }
}
</script>[/html]

5

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

[html]<!-- НАЧАЛО ПОСТА ЭРЕБУСА -->
<div class="erebus-chronicle-container">

    <!-- Стили (Изолированные) -->
    <style>
        /* Подключение шрифтов */
        @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');

        .erebus-chronicle-container {
            background-color: #120e16;
            color: #e0d7eb;
            font-family: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
            /* Базовый размер не сработал, зададим его ниже для P */
            padding: 40px;
            max-width: 950px;
            margin: 0 auto;
            border: 1px solid #4a3f5e;
            box-shadow: 0 0 25px rgba(0,0,0,0.9);
            border-radius: 4px;
        }

        /* !ВАЖНО: Принудительный размер шрифта для текста */
        .erebus-chronicle-container p {
            font-size: 20px !important; /* Force size */
            line-height: 1.6 !important;
            margin-bottom: 20px;
        }

        /* Заголовки */
        .erebus-chronicle-container h3 {
            font-family: 'Cinzel', 'Georgia', serif;
            color: #b39ddb;
            border-bottom: 1px solid #5e4b75;
            padding-bottom: 15px;
            margin-top: 50px;
            margin-bottom: 25px;
            font-weight: normal;
            font-size: 26px !important;
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* Выделения */
        .erebus-chronicle-container strong {
            color: #fff;
            font-weight: bold;
            text-shadow: 0 0 8px rgba(179, 157, 219, 0.3);
        }

        /* Мысли (курсив) */
        .erebus-chronicle-container p.thought {
            font-style: italic;
            color: #c5bce0;
            margin-left: 20px;
            border-left: 3px solid #5e4b75;
            padding-left: 20px;
            background: rgba(94, 75, 117, 0.1); /* Легкий фон для выделения */
            padding-top: 10px;
            padding-bottom: 10px;
        }
       
        /* Шепот Скверны */
        .erebus-chronicle-container p.corruption {
            font-style: italic;
            color: #a5d6a7;
            margin-left: 20px;
            border-left: 3px solid #2e7d32;
            padding-left: 20px;
            background: rgba(46, 125, 50, 0.1);
            padding-top: 10px;
            padding-bottom: 10px;
        }

        /* Картинки */
        .erebus-chronicle-container .polaroid {
            background-color: #1a1520;
            padding: 15px;
            border: 1px solid #3a2f4b;
            margin: 40px 0;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
        }

        .erebus-chronicle-container img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
            opacity: 0.95;
            border-radius: 2px;
        }

        .erebus-chronicle-container .caption {
            font-size: 16px !important; /* Уменьшил, чтобы не спорил с текстом */
            color: #9575cd;
            margin-top: 15px;
            font-style: italic;
            font-family: 'Courier New', monospace;
        }

        /* Письмо в конце */
        .erebus-chronicle-container .letter-box {
            background-color: #18141d;
            border: 1px solid #5e35b1;
            padding: 40px;
            margin-top: 60px;
            box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
        }

        .erebus-chronicle-container .letter-header {
            font-family: 'Courier New', monospace;
            color: #9575cd;
            border-bottom: 1px dashed #4a3f5e;
            padding-bottom: 15px;
            margin-bottom: 30px;
            font-size: 16px !important;
            line-height: 1.4;
        }

        /* Блок подписи */
        .erebus-chronicle-container .signature-container {
            margin-top: 50px;
            text-align: right;
            width: 100%;
        }

        .erebus-chronicle-container .signature-content {
            display: inline-block;
            text-align: center;
        }

        .erebus-chronicle-container .signature-text {
            font-family: 'Cinzel', 'Georgia', serif;
            font-size: 22px !important;
            color: #d1c4e9;
            margin-bottom: 10px;
            display: block;
        }

        .erebus-chronicle-container .seal-img {
            width: 160px;
            opacity: 0.95;
            transform: rotate(-5deg);
        }

        /* Преписка */
        .erebus-chronicle-container .disclaimer {
            font-size: 14px !important;
            color: #6a5a7a;
            text-align: center;
            margin-bottom: 30px;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-family: monospace;
        }

        /* Аудио плеер */
        .erebus-audio-player {
            text-align: center;
            margin-bottom: 40px;
            padding: 10px;
            border-bottom: 1px solid #3a2f4b;
        }
       
        /* Мобильная версия */
        @media (max-width: 600px) {
            .erebus-chronicle-container { padding: 15px; }
            .erebus-chronicle-container p { font-size: 18px !important; }
            .erebus-chronicle-container .signature-container { text-align: center; }
        }
    </style>

    <!-- МУЗЫКА -->
    <div class="erebus-audio-player">
        <audio controls style="width: 100%; max-width: 400px; border-radius: 20px; background: #f1f3f4;">
            <source src="https://forumstatic.ru/files/001c/1f/11/86390.mp3" type="audio/mpeg">
            Ваш браузер не поддерживает аудио элемент.
        </audio>
    </div>

    <!-- ПРЕПИСКА -->
    <div class="disclaimer">
        /// Архив Дома Белладонна. Запись № 2024-End. <br>
        * События могут быть искажены субъективным восприятием автора. *
    </div>

    <!-- ЧАСТЬ 1: ПРАЗДНИК -->
    <div class="polaroid">
        <img src="https://upforme.ru/uploads/001c/1f/11/2/940624.jpg" alt="Праздник">
        <div class="caption">"Управляемый хаос. Эффективность счастья: 140%."</div>
    </div>

    <p>Предновогодняя ночь опустилась на поместье Белладонна мягким, бархатным покровом, укутав старые стены в тишину и ожидание. В гостиной, напоенной густым ароматом хвои, горячего воска и мандариновых корок, царила атмосфера, которую Эребус мог бы охарактеризовать как «идеальный баланс тепла и света». Он сидел в глубоком кресле, позволяя бликам пламени плясать на своих бледных пальцах, и наблюдал за происходящим не как строгий надзиратель, а как уставший мастер, любующийся завершением сложного опыта.</p>

    <p>Мира, свернувшаяся на его коленях серебристым пушистым рогаликом, тихо посапывала, видя свои лисьи сны. Её тепло было единственной константой в этом переменчивом мире, за которую Эребус держался по-настоящему крепко.</p>

    <p>Вокруг же царил управляемый хаос. Младшие горничные порхали вокруг ёлки подобно ярким, неугомонным искрам. Их новые, остроконечные уши — результат утренней прихоти и его алхимического вмешательства — забавно подрагивали от смеха. Люди... Они так стремились прикоснуться к сказке, что попросили его изменить их физиологию. И он согласился. Не ради эксперимента, а ради той удивительной метаморфозы, которая произошла с самим пространством дома: скучная рутина трансформировалась в искреннюю, звенящую радость.</p>

    <p class="thought">«Удивительно. Всего лишь временная коррекция хрящевой ткани, а эффект сравним с мощнейшим антидепрессантом, распыленным в воздухе. Люди ищут магию в форме ушей, не замечая, что настоящая магия — это их способность генерировать счастье из ничего. Пожалуй, в этой формуле есть свое изящество.»</p>

    <p>Глядя на то, как свет гирлянд преломляется в стеклянных шарах, Эребус почувствовал, как мысли замедляют свой бег, обретая прозрачность кристалла. Этот покой напомнил ему о другом моменте тишины, когда он поставил финальную точку в документе, который здесь называли просто «<strong>Анкетой</strong>».</p>

    <!-- ЧАСТЬ 2: АНКЕТА -->
    <div class="polaroid">
        <img src="https://upforme.ru/uploads/001c/1f/11/2/11644.jpg" alt="Анкета">
        <div class="caption">"Автопортрет интеллекта. Прим.: глаза не светятся, это блик."</div>
    </div>

    <p>Тогда, в замкнутом пространстве кабинета, он занимался не бюрократией. Он занимался дистилляцией собственной души. Мир Разломов требовал определенности, и Эребус вылил свою суть на бумагу, превращая хаос мыслей в строгие, красивые строки чернил. Это было похоже на создание философского камня: отсечь всё лишнее, оставить лишь суть. Свои принципы, свои страхи, свою «Печать Энтропии» — он каталогизировал всё, превращая свои слабости в известные переменные.</p>

    <p>Заполнение той анкеты стало для него ритуалом заземления. Он словно вбил золотой гвоздь в карту реальности, заявив: «Я — Эребус. Я существую. И вот мои правила игры».</p>

    <p class="thought">«Хаос снаружи неизбежен. Но внутри, на этих страницах и в этом разуме, архитектура личности теперь безупречна. Я узаконил себя в этом мире.»</p>

    <p>Геката бесшумно возникла рядом, ставя на столик фарфоровый чайник. Пар поднимался вверх, сплетаясь с дымом камина. Эребус едва заметно кивнул ей, принимая чашку. В эту ночь даже великому скептику не хотелось разбирать чудо на атомы. Хотелось просто быть его частью.</p>

    <!-- ЧАСТЬ 3: ОБЪЯВЛЕНИЕ -->
    <p>Память услужливо сменила декорации. Тишина кабинета сменилась гулом воспоминаний о том вечере, когда он, буквально выжатый после многочасовой работы над Анкетой, переступил порог Питейной.</p>

    <p>Эребус помнил то физическое ощущение нехватки кислорода — не столько от быстрой ходьбы, сколько от необходимости покинуть свою стерильную капсулу и окунуться в бурлящий социальный бульон. Питейная встретила его плотной стеной звука, запаха дешевого эля и жареного мяса. Для него это было похоже на вход в центрифугу: слишком громко, слишком хаотично, слишком многолюдно.</p>

    <div class="polaroid">
        <img src="https://upforme.ru/uploads/001c/1f/11/2/303899.jpg" alt="Объявление">
        <div class="caption">"Социальный протокол выполнен. Уровень дискомфорта: критический."</div>
    </div>

    <p>Он чувствовал себя инородным телом, случайно попавшим в здоровый организм. Растрепанный, с чернильными пятнами на манжетах, он с трудом подавил желание стать невидимым. Социальный этикет требовал приветствовать присутствующих. Эребус выполнил этот ритуал механически, на остатках волевого ресурса, кивая знакомым лицам, которые в дымке таверны казались размытыми пятнами Роршаха.</p>

    <p>Но у него была цель. И эта цель служила якорем, удерживающим его в реальности. В руках он сжимал свернутый пергамент — объявление. Ему нужен был проводник. Не просто наемник, способный махать мечом, а переменная, способная уравновесить его собственные недостатки в грядущем путешествии.</p>

    <p>Он ожидал увидеть сурового следопыта или алчного наемника. Но судьба, обладающая специфическим чувством юмора, подбросила ему нечто иное.</p>

    <p>Кобольд. Существо, которое в обычной классификации Эребуса занимало место где-то между "интересным образцом фауны" и "потенциальным ингредиентом". Но этот экземпляр был девиантным. В его янтарных глазах с вертикальными зрачками горел не голод, а пламя, достойное императора.</p>

    <p><strong>— Кобольдская Империя,</strong> — повторил про себя Эребус, пробуя эту фразу на вкус. <strong>— Звучит как утопия, обреченная на крах.</strong></p>

    <p>Но именно этот масштаб мышления подкупил его. Когда маленькое существо с черной чешуей начало с жаром излагать свои планы по мировому господству, Эребус впервые за вечер почувствовал не раздражение, а научный азарт. Большинство посетителей таверны мечтали лишь о том, чтобы дожить до утра. Этот же Кобольд мыслил категориями вечности.</p>

    <p class="thought">«Амбиции — это единственное топливо, которое имеет значение. Вектор его стремлений абсурден, но его магнитуда впечатляет. Союз с таким существом нелогичен. И именно поэтому это может сработать.»</p>

    <p>Так, среди звона кружек и пьяного хохота, был заключен самый странный союз в истории Дома Белладонна. Мрачный эльф-алхимик и будущий "Император" кобольдов.</p>

    <!-- ЧАСТЬ 4: КРАЖА И ИГРУШКА -->
    <p>Эребус осторожно, стараясь не нарушить хрупкую геометрию сна, переложил Миру с коленей на мягкую обивку кресла. Лисица недовольно фыркнула, но тут же свернулась обратно, приняв форму идеальной запятой.</p>

    <p>Алхимик поднялся и подошел к каминной полке. Там, среди пыльных колб и стопок бумаг, лежал предмет, совершенно не вписывающийся в этот рабочий натюрморт — сфера, инкрустированная россыпью драгоценных камней. В свете огня они вспыхнули хищным, холодным блеском. Эребус подбросил артефакт в руке, оценивая его вес и центровку, а затем, с ловкостью фокусника, привязал к золотому ушку простую бечевку.</p>

    <div class="polaroid">
        <img src="https://upforme.ru/uploads/001c/1f/11/2/713303.jpg" alt="Игрушка">
        <div class="caption">"Маскировка улики. Уровень: Гранд-Мастер."</div>
    </div>

    <p>Один шаг к елке — и древний магический артефакт, за который иные коллекционеры отдали бы полжизни, занял место между стеклянной шишкой и пряничным домиком.</p>

    <p class="thought">«Идеальная маскировка. Лучшее место, чтобы спрятать украденную вещь — это у всех на виду, замаскировав её под праздничную безделушку. Ирония — самая надежная форма защиты.»</p>

    <p>Холод камней под пальцами мгновенно перенес его в Вечный Дол. Выставка Талантов. Мероприятие, представлявшее собой квинтэссенцию всего, что он презирал: тщеславия, шума и бездарной траты ресурсов. Он оказался там случайно, но остался ради неё — сферы. И ради той, кто помогла её достать.</p>

    <p>Память нарисовала образ маленькой кобольдши-барда. Это существо было живым воплощением акустической атаки. Эребус помнил, как она вышла на сцену — маленькая, черная, с горящими янтарными глазами — и начала играть. Это было не просто выступление, это была эмоциональная манипуляция высшего порядка. Дворяне, эти напомаженные манекены, рыдали навзрыд, размазывая тушь и теряя остатки достоинства.</p>

    <p class="thought">«Она играла на их нервах так же виртуозно, как на струнах. А я... я играл роль громоотвода.»</p>

    <p>Пока зал тонул в слезах и овациях, Эребус вышел в центр. Ему не нужно было кричать. Ему хватило лишь поднять бровь и начать громко, с убийственной вежливостью критиковать «примитивную магическую структуру» главного экспоната выставки. Его снобизм сработал как магнит. Вся стража, все взгляды устремились на него, на этого наглого эльфа, посмевшего оскорбить святыню.</p>

    <p>В этот момент идеального социального напряжения, пока он держал на себе внимание толпы, как дирижер держит паузу, маленькая тень скользнула к пьедесталу. Щелчок — и сфера исчезла.</p>

    <p>Глядя на артефакт, теперь мирно висящий на ветке, Эребус почувствовал, как уголки его губ дрогнули, нарушая привычную бесстрастность лица. Это была не просто кража. Это был симбиоз. Хаос кобольда и порядок алхимика, слившиеся в идеальное преступление.</p>

    <!-- ЧАСТЬ 5: ЭТЕЛЬ -->
    <p>Эребус легким движением повесил новоиспеченную «игрушку» на еловую лапу. Сфера качнулась и замерла, идеально слившись с мишурой. Теперь это был не украденный артефакт древности, а просто блестящий шар, отражающий праздничные огни.</p>

    <p class="thought">«Мимикрия завершена. Объект скрыт в открытом доступе.»</p>

    <p>Он отошел от елки и принял из рук Гекаты фарфоровую чашку. Чай был обжигающе горячим, с терпкой нотой можжевельника и сушеных трав. Этот вкус — сложный, вяжущий, лекарственный — мгновенно перенес его из уютной гостиной в холодные залы Академии Алхимии.</p>

    <div class="polaroid">
        <img src="https://upforme.ru/uploads/001c/1f/11/2/997436.jpg" alt="Этель">
        <div class="caption">"Яд или лекарство? Всё зависит от дозировки и скуки."</div>
    </div>

    <p>«Зимний Симпозиум Здравоохранения». Мероприятие, которое обещало быть смертельно скучным парадом лекций о лечении насморка ромашкой. Эребус присутствовал там исключительно ради соблюдения протокола, ощущая себя микроскопом, которым забивают гвозди.</p>

    <p>Так продолжалось ровно до тех пор, пока он не встретил её.</p>

    <p>Леди Этель из Дома Ренд. Она выделялась среди серой массы академиков, как рубин, упавший в кучу золы. Вампирша, рассуждающая о лечении простуды — в этом уже была великолепная ирония. Но когда они разговорились в кулуарах, Эребус понял: перед ним не просто красивая хищница, а коллега, чья научная этика так же эластична, как и его собственная.</p>

    <p>Их диалог быстро перерос в дуэль. Не на шпагах, а на формулах.<br>
    — Традиционные методы слишком медленны, — заметила она, крутя в руках бокал с густой красной жидкостью, подозрительно напоминающей не вино. — Организм нужно шокировать, чтобы он забыл о болезни.<br>
    — Или перестроить, — парировал Эребус. — Зачем лечить симптом, если можно модифицировать носителя?</p>

    <p>Они заключили пари. Кто создаст самое «интересное» зелье от зимней хандры. Не самое безопасное, не самое дешевое, а именно <em>интересное</em>. Это была восхитительная конкуренция. Пока остальные алхимики возились с медом и лимоном, Эребус и Этель обсуждали дозировки яда виверны и использование гемомантии для ускорения метаболизма.</p>

    <p class="thought">«Она была опасна. Она была блестяща. Редкое сочетание, когда интеллект собеседника возбуждает не меньше, чем его внешность. В тот вечер я не нашел лекарство от простуды, но нашел того, кто понимает язык «сомнительных экспериментов».»</p>

    <p>Эребус сделал глоток чая, скрывая улыбку в пару. Та битва умов закончилась ничьей — оба их эликсира были признаны «чрезвычайно эффективными и категорически запрещенными к использованию на живых людях». Прекрасный результат.</p>

    <!-- ЧАСТЬ 6: НОАТИС И РЕСПИРАТОР -->
    <p>Эребус сделал еще один глоток, позволяя терпкости чая омыть нёбо, и лениво перевел взгляд в сторону. Геката, бесшумная как тень, убирала со стола остатки его дневной работы. Среди свитков и перьев, которые она укладывала в ящик, мелькнул знакомый кожаный ремешок и медная окантова — его старый походный респиратор.</p>

    <p>Этот потертый кусок кожи и стекла мгновенно перечеркнул уют гостиной, вернув Эребуса в тот день, когда его карьера едва не оборвалась под щелчок арбалетного болта.</p>

    <p>Они с Принцем Ноатисом стояли у входа. Это была научная экспедиция: изучить патоген, поразивший целое поселение. Ноатис, полный благородного желания лично оценить ситуацию, шагнул вперед с открытым лицом. Для него это был жест бесстрашия и солидарности с народом. Для Эребуса это было вопиющим нарушением техники безопасности.</p>

    <div class="polaroid">
        <img src="https://upforme.ru/uploads/001c/1f/11/2/735978.jpg" alt="Ноатис">
        <div class="caption">"Этикет — ничто, кислород — всё. Безопасность оправдывает насилие."</div>
    </div>

    <p>Алхимик не стал тратить время на уговоры или объяснение аэрозольного метода передачи инфекции. Он просто шагнул к монарху и резким, грубым движением натянул респираторную маску прямо на идеальное, аристократическое лицо Принца, плотно затянув ремешки на затылке.</p>

    <p class="thought">«Объект «Принц» входит в токсичную среду без защиты. Вероятность заражения — 98%. Логическое решение: принудительная изоляция дыхательных путей. Социальные протоколы — игнорировать.»</p>

    <p>Реакция была мгновенной. Щелчок взводимых арбалетов разрезал тишину. Личная гвардия, видящая, как какой-то эльф грубо хватает их правителя за лицо, среагировала по уставу. Наконечник уставился в грудь и голову Эребуса.</p>

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

    <p><strong>— Если он сделает вдох,</strong> — спокойно произнес он сквозь собственный респиратор, <strong>— вам некого будет охранять. Опустите оружие.</strong></p>

    <p>Сейчас, в тепле и безопасности, Эребус усмехнулся. Тогда его чуть не пристрелили за «покушение». Но зато Принц не закашлял ни разу. Вроде бы. Эффективность снова победила этикет.</p>

    <!-- ЧАСТЬ 7: СКВЕРНА -->
    <p>Воспоминание о Принце и респираторе растворилось, уступая место реальности. Эребус снова ощутил мягкость бархата под пальцами и тепло камина. Елка мерцала, горничные тихо смеялись в углу, Мира сопела во сне. Казалось, мир наконец-то пришел в состояние идеального покоя. Простые радости — тепло, чай, тишина — сейчас они казались не банальностью, а высшим достижением эволюции.</p>

    <p>Он позволил себе расслабиться, прикрыв глаза.</p>

    <p>Но тишина в его голове никогда не была абсолютной. Сквозь треск дров и шелест еловых иголок просочился иной звук. Не слышимый ухом, но отчетливо вибрирующий в нейронах. Вкрадчивый, тягучий, как нефть, голос.</p>

    <p class="corruption">«Ты называешь это отдыхом, мой милый алхимик? Ты думаешь, что спасся от бурь в этой гавани? Оглянись...»</p>

    <p>Эребус не вздрогнул. Он знал этот голос лучше, чем свой собственный.</p>

    <p class="corruption">«Тот контракт с Кобольдом... Та кража Сферы... Та дерзость с Принцем... Ты думаешь, это была лишь твоя смелость? Нет. Это была я. Я толкала тебя к краю. Я шептала тебе сомнения, которые рождали теории. Я вела тебя к Бездне, шаг за шагом, прикрываясь твоим "научным интересом". Разве бездна не прекрасна?»</p>

    <div class="polaroid">
        <img src="https://upforme.ru/uploads/001c/1f/11/2/312242.jpg" alt="Скверна">
        <div class="caption">"Внутренний диалог с лучшим врагом. Патология как вдохновение."</div>
    </div>

    <p>Тень за его спиной сгустилась. Она не падала от предметов, она рождалась из пустоты. Вязкая, темная материя поднялась над спинкой кресла, формируясь в текучий женский силуэт. Множество призрачных рук мягко легли на плечи Эребуса, не давя, но напоминая о своем присутствии. Прекрасное и жуткое лицо с закрытыми глазами возникло прямо у его уха.</p>

    <p class="corruption">«Ты — мой сосуд, Эребус. А я — твое вдохновение. Мы достигли этого финала года вместе.»</p>

    <p>Эребус медленно открыл глаза. Он не стал стряхивать эти призрачные руки. Он не потянулся за сывороткой-супрессором. В эту ночь он был честен с собой до конца.</p>

    <p><strong>— Диагноз верен,</strong> — тихо произнес он в пустоту, отвечая голосу в своей голове. <strong>— Ты — патология. Ты — хроническая болезнь, разъедающая структуру моей личности. Но...</strong></p>

    <p>Он посмотрел на свое отражение в темном оконном стекле, где за его плечом угадывалась тьма.</p>

    <p><strong>— ...ты стала неотъемлемой переменной моего уравнения. Без твоих вопросов мои ответы были бы слишком простыми. С Новым Годом, моя дорогая Скверна.</strong></p>

    <!-- ЭПИЛОГ / ПИСЬМО -->
    <div class="letter-box">
        <div class="letter-header">
            Кому: Жителям Сказания Разлома / Переменным Хаоса<br>
            От кого: Лорд Эребус, Глава Дома Белладонна<br>
            Статус: Архивировано
        </div>
       
        <h3>«О переменчивости грядущего цикла»</h3>
       
        <p>Календарный цикл завершен. С точки зрения сухой статистики, тот факт, что вы читаете эти строки, уже является успехом. Вы пережили шторма, яды и собственные ошибки. Это похвально.</p>
       
        <p>В грядущем году я, вопреки традициям, не стану желать вам спокойствия. Спокойствие — это стагнация, смерть разума и остановка прогресса. Я желаю вам обратного.</p>
       
        <p>Я желаю вам стать <strong>Аномалиями</strong>.</p>
       
        <p>Будьте непредсказуемыми. Будьте сложными. Создавайте ситуации, которые заставят мой аналитический ум искать новые формулы. Пусть ваши приключения станут теми данными, которые не стыдно занести в вечные архивы.</p>
       
        <p>Мир Разлома огромен, и он требует исследования. Не разочаруйте меня скукой. Играйте так, чтобы остаться в истории.</p>
       
        <p>Мой архив ждет.</p>
       
        <!-- Подпись и печать СПРАВА -->
        <div class="signature-container">
            <div class="signature-content">
                <span class="signature-text">Лорд Эребус,<br>Магистр Алхимии</span>
                <img src="https://upforme.ru/uploads/001c/1f/11/2/535441.png" alt="Печать" class="seal-img">
            </div>
        </div>
    </div>

</div>
<!-- КОНЕЦ ПОСТА -->[/html]

Страница: 1

Вы здесь » Realatorum Paradox » Витрина » Оформление

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