Просмотр кода страницы Событие «Обратный отсчет»

<div style="background: #ffffff; padding: 32px 40px; color: #1f2328; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; margin: 0; width: 100%; box-sizing: border-box;">

<!-- ВЕРХНИЙ БЛОК: Описание слева, картинка «Нечто близко» справа -->
<div style="display: flex; flex-wrap: wrap; gap: 32px; align-items: center; margin-bottom: 36px;">
  
  <!-- Текстовая часть -->
  <div style="flex: 1 1 500px;">
    <p style="font-size: 1.05em; line-height: 1.6; color: #4a4f55; margin: 0 0 20px 0;">
    <strong>«Обратный отсчет»</strong> — загадочное событие, предвещающее нечто грандиозное. Следите за таймером, чтобы не упустить момент, и забирайте эксклюзивные награды в назначенное время. Станьте частью премьеры и будьте в центре событий!
    </p>
    <div style="background: #f6f8fa; border-left: 4px solid #8250df; padding: 12px 16px; border-radius: 0 8px 8px 0;">
      <p style="font-size: 1em; line-height: 1.5; color: #1f2328; margin: 0;">
      <strong>Дата сбора наград:</strong> 15–20 октября.<br>
      <strong>Ограничение по уровню:</strong> 50 и выше.
      </p>
    </div>
  </div>

  <!-- Картинка «Нечто близко» справа (уменьшена) -->
  <div style="flex: 0 0 auto; text-align: center; margin-left: auto;">
    <div style="border-radius: 10px; overflow: hidden; box-shadow: 0 4px 12px rgba(130, 80, 223, 0.15); border: 1px solid #e1d5f5; display: inline-block;">
      [[Файл:Значок анонса1.jpg|160px|center|Значок анонса]]
    </div>
    <p style="margin: 8px 0 0 0; font-weight: 600; color: #8250df; font-size: 0.8em; letter-spacing: 0.5px; text-transform: uppercase;">Значок «Нечто близко»</p>
  </div>

</div>

<!-- КАК ПРИНЯТЬ УЧАСТИЕ -->
<div style="margin-bottom: 36px; width: 100%; box-sizing: border-box;">
  <h2 style="color: #1f2328; font-weight: 600; font-size: 1.2em; letter-spacing: -0.2px; border-bottom: 1px solid #d0d7de; padding-bottom: 6px;">Как принять участие</h2>
  <div style="background: #f6f8fa; border-radius: 10px; padding: 24px; border: 1px solid #d0d7de;">
    
    <p style="margin-top: 0; color: #1f2328; font-size: 1.05em;">На главной странице сайта, в самом центре, игроков встречает загадочная иконка с вопросом и интригующим описанием <strong>«Нечто близко»</strong>. Нажатие на неё открывает отдельную страницу с обратным отсчетом.</p>
    <p style="color: #1f2328; font-size: 1.05em;">Таймер работает в режиме реального времени и отсчитывает 5 дней. Как только время истекает, открывается доступ к уникальным наградам. У каждой награды своя дата открытия и время сбора, поэтому важно не пропустить нужный час. Обратите внимание: для участия в акции ваш уровень должен быть <strong>не ниже 50</strong>.</p>
    
    <!-- Страница обратного отсчета (единственная большая картинка) -->
    <div style="display: flex; justify-content: center; width: 100%; margin-top: 28px;">
      <div style="text-align: center;">
        <div style="border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border: 1px solid #d0d7de;">
          [[Файл:Отчет анонса.jpg|800px|center|Страница таймера]]
        </div>
        <p style="margin: 12px 0 0 0; font-weight: 500; color: #1f2328;">Страница обратного отсчета</p>
      </div>
    </div>
  </div>
</div>

<!-- ИНТЕРФЕЙС И ДОПОЛНИТЕЛЬНЫЕ ВОЗМОЖНОСТИ -->
<div style="margin-bottom: 36px; width: 100%; box-sizing: border-box;">
  <h2 style="color: #1f2328; font-weight: 600; font-size: 1.2em; letter-spacing: -0.2px; border-bottom: 1px solid #d0d7de; padding-bottom: 6px;">Интерфейс и управление</h2>
  <div style="background: #f6f8fa; border-radius: 10px; padding: 24px; border: 1px solid #d0d7de;">
    
    <p style="margin-top: 0; color: #1f2328;"><strong>Анимированное изображение</strong> создаёт атмосферу таинственности. Если анимация мешает или отвлекает, её можно отключить с помощью тумблера:</p>
    
    <div style="display: flex; justify-content: center; margin: 16px 0 32px 0; width: 100%;">
      <div style="text-align: center; background: #ffffff; padding: 12px 24px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #e8ecf0;">
        [[Файл:Тумблер анимации.jpg|220px|center|Тумблер анимации]]
        <p style="margin: 8px 0 0 0; font-weight: 500; color: #4a4f55; font-size: 0.9em;">Отключение анимации</p>
      </div>
    </div>

    <p style="color: #1f2328;">Чтобы не пропустить премьеру, используйте кнопки быстрого доступа. <strong>«Напомнить о премьере»</strong> синхронизирует событие с календарём (Google или <em>.ics</em> для Apple / Outlook), а <strong>«Быть ближе»</strong> открывает приглашение в Telegram.</p>
    
    <!-- Уменьшенные кнопки напоминаний в красивых карточках -->
    <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; align-items: stretch; margin-top: 20px; border-top: 1px dashed #d0d7de; padding-top: 24px;">
      
      <div style="flex: 1 1 200px; max-width: 280px; background: #ffffff; padding: 16px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #e8ecf0; text-align: center;">
        [[Файл:Напоминание о премьере.jpg|220px|center|Кнопка напоминания]]
        <p style="margin: 12px 0 0 0; font-weight: 600; color: #1f2328; font-size: 0.9em;">Кнопка напоминания</p>
      </div>

      <div style="flex: 1 1 200px; max-width: 280px; background: #ffffff; padding: 16px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #e8ecf0; text-align: center;">
        [[Файл:Напоминание в гугл календаре.jpg|220px|center|Гугл календарь]]
        <p style="margin: 12px 0 0 0; font-weight: 600; color: #1f2328; font-size: 0.9em;">Google Календарь</p>
      </div>

      <div style="flex: 1 1 200px; max-width: 280px; background: #ffffff; padding: 16px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #e8ecf0; text-align: center;">
        [[Файл:Пригласительный на канал тг.jpg|220px|center|Приглашение в Telegram]]
        <p style="margin: 12px 0 0 0; font-weight: 600; color: #1f2328; font-size: 0.9em;">Telegram-канал</p>
      </div>

    </div>
  </div>
</div>

<!-- СПИСОК НАГРАД -->
<div style="margin-bottom: 28px; width: 100%; box-sizing: border-box;">
  <h2 style="color: #1f2328; font-weight: 600; font-size: 1.2em; letter-spacing: -0.2px; border-bottom: 1px solid #d0d7de; padding-bottom: 6px;">Список наград</h2>
  <div style="background: #f6f8fa; border-radius: 10px; padding: 24px; border: 1px solid #d0d7de; overflow-x: auto;">
    <p style="margin-top: 0; color: #1f2328;">В рамках события игрокам доступно 6 уникальных призов. Часть из них скрыта до наступления определённого времени.</p>
    
    <div style="display: flex; flex-direction: column; align-items: center; gap: 32px; margin: 24px 0;">
      
      <!-- Уменьшенные карточки статусов -->
      <div style="display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; align-items: stretch; width: 100%;">
        <div style="flex: 1 1 180px; max-width: 240px; background: #ffffff; padding: 12px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #e8ecf0; text-align: center;">
          [[Файл:Награда получена отчт..jpg|200px|center|Подарок получен]]
          <p style="margin: 10px 0 0 0; font-weight: 500; color: #1f2328; font-size: 0.9em;">Подарок получен</p>
        </div>
        <div style="flex: 1 1 180px; max-width: 240px; background: #ffffff; padding: 12px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #e8ecf0; text-align: center;">
          [[Файл:Время вышло.jpg|200px|center|Время вышло]]
          <p style="margin: 10px 0 0 0; font-weight: 500; color: #1f2328; font-size: 0.9em;">Время вышло</p>
        </div>
        <div style="flex: 1 1 180px; max-width: 240px; background: #ffffff; padding: 12px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border: 1px solid #e8ecf0; text-align: center;">
          [[Файл:Нужен 50ур.jpg|200px|center|Требование к уровню]]
          <p style="margin: 10px 0 0 0; font-weight: 500; color: #1f2328; font-size: 0.9em;">Требование 50 уровня</p>
        </div>
      </div>

      <!-- Карта наград (по центру) -->
      <div style="text-align: center; width: 100%; margin-top: 8px;">
        <div style="display: inline-block; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.08); border: 1px solid #d0d7de;">
          [[Файл:Карта наград.jpg|600px|center|Карта наград]]
        </div>
        <p style="margin: 12px 0 0 0; font-weight: 500; color: #1f2328;">Карта доступных наград</p>
      </div>

    </div>

    <table style="width: 100%; border-collapse: collapse; font-size: 0.95em; text-align: left; table-layout: fixed; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,0.05);">
      <tr style="border-bottom: 2px solid #d0d7de; background: #f6f8fa;">
        <th style="padding: 12px; font-weight: 600; color: #1f2328; text-align: left; width: 8%;">№</th>
        <th style="padding: 12px; font-weight: 600; color: #1f2328; text-align: left; width: 72%;">Награда</th>
        <th style="padding: 12px; font-weight: 600; color: #1f2328; text-align: left; width: 20%;">Количество</th>
      </tr>
      <tr style="border-bottom: 1px solid #e8ecf0;">
        <td style="padding: 12px; color: #4a4f55;">1</td>
        <td style="padding: 12px; color: #4a4f55;">[[Фон для визитки "Просто так!"]]</td>
        <td style="padding: 12px; color: #4a4f55;">1 шт.</td>
      </tr>
      <tr style="border-bottom: 1px solid #e8ecf0;">
        <td style="padding: 12px; color: #4a4f55;">2</td>
        <td style="padding: 12px; color: #4a4f55;">[[Подарок "Бумажный кролик в цилиндре"]]</td>
        <td style="padding: 12px; color: #4a4f55;">1 шт.</td>
      </tr>
      <tr style="border-bottom: 1px solid #e8ecf0;">
        <td style="padding: 12px; color: #4a4f55;">3</td>
        <td style="padding: 12px; color: #4a4f55;">[[Костюм "Мгла"]] (в зависимости от пола)</td>
        <td style="padding: 12px; color: #4a4f55;">1 шт.</td>
      </tr>
      <tr style="border-bottom: 1px solid #e8ecf0;">
        <td style="padding: 12px; color: #4a4f55;">4</td>
        <td style="padding: 12px; color: #4a4f55;">[[Костюм "Когуре"]] (в зависимости от пола)</td>
        <td style="padding: 12px; color: #6a6f75;">	1 шт.</td>
      </tr>
      <tr style="border-bottom: 1px solid #e8ecf0;">
        <td style="padding: 12px; color: #4a4f55;">5</td>
        <td style="padding: 12px; color: #4a4f55;">[[Титул "Эмиссар Тьмы"]]</td>
        <td style="padding: 12px; color: #6a6f75;">1 шт.</td>
      </tr>
      <tr style="border-bottom: 1px solid #e8ecf0;">
        <td style="padding: 12px; color: #4a4f55;">6</td>
        <td style="padding: 12px; color: #6a6f75; font-style: italic;">Пока секрет</td>
        <td style="padding: 12px; color: #6a6f75;">—</td>
      </tr>
    </table>
    <p style="margin-top: 16px; color: #4a4f55; font-size: 0.95em; text-align: center;">Не забывайте следить за таймером и календарём — скрытые награды станут доступны совсем скоро!</p>
  </div>
</div>

</div>