Дик, 23 у.о.

Страница: 1

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

Поделиться12018-08-12 11:37:24

Автор: Dick Summers
Красота скрывается в малом
Сообщений: 117
Уважение: +2
Последний визит:
Вчера 23:31:17

Дик Саммерс

*Ash Stymest

Dick Summers | 24 у.о. [10.11.1993]
Церас » солист и гитарист группы "Зеро" » гомо

Ангел, выполняющий свои обязанности, наложенные "сверху".

Поделиться22025-10-01 18:43:31

Автор: Dick Summers
Красота скрывается в малом
Сообщений: 117
Уважение: +2
Последний визит:
Вчера 23:31:17

Код:

<!--HTML--><style>
.rusff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 900px;
  margin: 20px auto;
}

.rusff-block {
  position: relative;
  height: 200px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
}

.rusff-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Затемнение */
  transition: opacity 0.4s ease;
  z-index: 1;
}

.rusff-block-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 2;
  transition: opacity 0.4s ease;
}

.rusff-block-date {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 8px;
}

.rusff-block-title {
  font-size: 18px;
  font-weight: bold;
}

.rusff-block-desc {
  opacity: 0;
  font-size: 15px;
  line-height: 1.4;
}

.rusff-block:hover::before {
  background: rgba(0, 0, 0, 0.6); /* Чуть темнее при наведении */
}

.rusff-block:hover .rusff-block-content {
  opacity: 0;
}

.rusff-block:hover .rusff-block-desc {
  opacity: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Фоновые изображения для каждого блока */
.block-1 { background-image: url('https://via.placeholder.com/300x200/4A90E2/FFFFFF?text=Image+1'); background-size: cover; background-position: center; }
.block-1:hover { background-image: url('https://via.placeholder.com/300x200/50E3C2/FFFFFF?text=Hover+1'); }

.block-2 { background-image: url('https://via.placeholder.com/300x200/E94E77/FFFFFF?text=Image+2'); background-size: cover; background-position: center; }
.block-2:hover { background-image: url('https://via.placeholder.com/300x200/F5A623/FFFFFF?text=Hover+2'); }

.block-3 { background-image: url('https://via.placeholder.com/300x200/7ED321/FFFFFF?text=Image+3'); background-size: cover; background-position: center; }
.block-3:hover { background-image: url('https://via.placeholder.com/300x200/9013FE/FFFFFF?text=Hover+3'); }

/* Повторите для блоков 4–9 по аналогии */
.block-4 { background-image: url('https://via.placeholder.com/300x200/BD10E0/FFFFFF?text=Image+4'); background-size: cover; }
.block-4:hover { background-image: url('https://via.placeholder.com/300x200/00C1D4/FFFFFF?text=Hover+4'); }

.block-5 { background-image: url('https://via.placeholder.com/300x200/FF6B6B/FFFFFF?text=Image+5'); background-size: cover; }
.block-5:hover { background-image: url('https://via.placeholder.com/300x200/4ECDC4/FFFFFF?text=Hover+5'); }

.block-6 { background-image: url('https://via.placeholder.com/300x200/FFE66D/FFFFFF?text=Image+6'); background-size: cover; }
.block-6:hover { background-image: url('https://via.placeholder.com/300x200/1A535C/FFFFFF?text=Hover+6'); }

.block-7 { background-image: url('https://via.placeholder.com/300x200/FF9F1C/FFFFFF?text=Image+7'); background-size: cover; }
.block-7:hover { background-image: url('https://via.placeholder.com/300x200/2EC4B6/FFFFFF?text=Hover+7'); }

.block-8 { background-image: url('https://via.placeholder.com/300x200/E71D36/FFFFFF?text=Image+8'); background-size: cover; }
.block-8:hover { background-image: url('https://via.placeholder.com/300x200/2A9D8F/FFFFFF?text=Hover+8'); }

.block-9 { background-image: url('https://via.placeholder.com/300x200/6A0572/FFFFFF?text=Image+9'); background-size: cover; }
.block-9:hover { background-image: url('https://via.placeholder.com/300x200/ABE9B3/FFFFFF?text=Hover+9'); }
</style>

<div class="rusff-grid">
  <div class="rusff-block block-1">
    <div class="rusff-block-content">
      <div class="rusff-block-date">[01/01/1990]</div>
      <div class="rusff-block-title">Заголовок 1</div>
    </div>
    <div class="rusff-block-desc">Краткое описание первого блока.</div>
  </div>
  
  <div class="rusff-block block-2">
    <div class="rusff-block-content">
      <div class="rusff-block-date">[15/03/2005]</div>
      <div class="rusff-block-title">Заголовок 2</div>
    </div>
    <div class="rusff-block-desc">Описание второго блока.</div>
  </div>
  
  <div class="rusff-block block-3">
    <div class="rusff-block-content">
      <div class="rusff-block-date">[22/11/2012]</div>
      <div class="rusff-block-title">Заголовок 3</div>
    </div>
    <div class="rusff-block-desc">Описание третьего блока.</div>
  </div>
  
  <div class="rusff-block block-4">
    <div class="rusff-block-content">
      <div class="rusff-block-date">[05/07/1998]</div>
      <div class="rusff-block-title">Заголовок 4</div>
    </div>
    <div class="rusff-block-desc">Описание четвёртого блока.</div>
  </div>
  
  <div class="rusff-block block-5">
    <div class="rusff-block-content">
      <div class="rusff-block-date">[30/12/2020]</div>
      <div class="rusff-block-title">Заголовок 5</div>
    </div>
    <div class="rusff-block-desc">Описание пятого блока.</div>
  </div>
  
  <div class="rusff-block block-6">
    <div class="rusff-block-content">
      <div class="rusff-block-date">[14/02/2018]</div>
      <div class="rusff-block-title">Заголовок 6</div>
    </div>
    <div class="rusff-block-desc">Описание шестого блока.</div>
  </div>
  
  <div class="rusff-block block-7">
    <div class="rusff-block-content">
      <div class="rusff-block-date">[09/09/2001]</div>
      <div class="rusff-block-title">Заголовок 7</div>
    </div>
    <div class="rusff-block-desc">Описание седьмого блока.</div>
  </div>
  
  <div class="rusff-block block-8">
    <div class="rusff-block-content">
      <div class="rusff-block-date">[21/04/2015]</div>
      <div class="rusff-block-title">Заголовок 8</div>
    </div>
    <div class="rusff-block-desc">Описание восьмого блока.</div>
  </div>
  
  <div class="rusff-block block-9">
    <div class="rusff-block-content">
      <div class="rusff-block-date">[11/11/2011]</div>
      <div class="rusff-block-title">Заголовок 9</div>
    </div>
    <div class="rusff-block-desc">Описание девятого блока.</div>
  </div>
</div>

Поделиться3Вчера 22:44:58

Автор: Dick Summers
Красота скрывается в малом
Сообщений: 117
Уважение: +2
Последний визит:
Вчера 23:31:17

Код:

<!--HTML-->
    <style>
        .chests-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 20px;
            margin: 30px 0;
            padding: 20px;
        }

        .chest-item {
            position: relative;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .chest-item:hover {
            transform: scale(1.05);
        }

        .chest-image {
            width: 100%;
            height: 150px;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid #8B4513;
        }

        .chest-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(139, 0, 0, 0.8);
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease;
            border-radius: 8px;
            font-family: 'Times New Roman', serif;
        }

        .chest-item:hover .chest-overlay {
            opacity: 1;
        }

        .chest-number {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 5px;
        }

        .chest-status {
            font-size: 14px;
            text-transform: uppercase;
        }

        .taken {
            border-color: #dc143c;
        }

        .taken .chest-overlay {
            background: rgba(220, 20, 60, 0.8);
        }
    </style>
    <!-- Остальной контент поста -->
    
    <div class="chests-container" id="chestsContainer">
        <!-- Шкатулки будут сгенерированы через JavaScript -->
    </div>

    <!-- Остальной контент поста -->

    <script>
        // Массив состояний шкатулок (true = занята, false = свободна)
        const chestStates = Array(13).fill(false);

        function createChests() {
            const container = document.getElementById('chestsContainer');
            
            chestStates.forEach((isTaken, index) => {
                const chestNumber = index + 1;
                
                const chestItem = document.createElement('div');
                chestItem.className = `chest-item ${isTaken ? 'taken' : ''}`;
                chestItem.innerHTML = `
                    <img src="путь/к/вашей/картинке/шкатулка${chestNumber}.jpg" 
                         alt="Шкатулка ${chestNumber}" 
                         class="chest-image"
                         onerror="this.src='https://via.placeholder.com/150x150/8B4513/FFFFFF?text=Шкатулка+${chestNumber}'">
                    <div class="chest-overlay">
                        <div class="chest-number">${chestNumber}</div>
                        <div class="chest-status">${isTaken ? 'ЗАБРАЛИ' : 'СВОБОДНА'}</div>
                    </div>
                `;
                
                // Обработчик клика для выбора шкатулки
                chestItem.addEventListener('click', function() {
                    if (!isTaken) {
                        selectChest(chestNumber);
                    }
                });
                
                container.appendChild(chestItem);
            });
        }

        function selectChest(chestNumber) {
            if (confirm(`Вы уверены, что хотите выбрать шкатулку номер ${chestNumber}?`)) {
                // Здесь можно добавить логику отправки выбора на сервер
                markChestAsTaken(chestNumber);
                
                // Показываем сообщение для копирования
                const message = `Участвую! Беру шкатулку номер ${chestNumber}.`;
                prompt('Скопируйте это сообщение для участия:', message);
            }
        }

        function markChestAsTaken(chestNumber) {
            const chestIndex = chestNumber - 1;
            chestStates[chestIndex] = true;
            
            // Обновляем отображение
            const chestItems = document.querySelectorAll('.chest-item');
            const targetChest = chestItems[chestIndex];
            
            targetChest.classList.add('taken');
            targetChest.querySelector('.chest-status').textContent = 'ЗАБРАЛИ';
            
            // Делаем шкатулку некликабельной
            targetChest.style.cursor = 'not-allowed';
            targetChest.style.opacity = '0.7';
        }

        // Инициализация при загрузке страницы
        document.addEventListener('DOMContentLoaded', createChests);

        // Функция для ручного управления состоянием шкатулок (для администратора)
        function updateChestStatus(chestNumber, isTaken) {
            const chestIndex = chestNumber - 1;
            if (chestIndex >= 0 && chestIndex < chestStates.length) {
                chestStates[chestIndex] = isTaken;
                
                const chestItems = document.querySelectorAll('.chest-item');
                const targetChest = chestItems[chestIndex];
                
                if (isTaken) {
                    targetChest.classList.add('taken');
                    targetChest.querySelector('.chest-status').textContent = 'ЗАБРАЛИ';
                    targetChest.style.cursor = 'not-allowed';
                    targetChest.style.opacity = '0.7';
                } else {
                    targetChest.classList.remove('taken');
                    targetChest.querySelector('.chest-status').textContent = 'СВОБОДНА';
                    targetChest.style.cursor = 'pointer';
                    targetChest.style.opacity = '1';
                }
            }
        }
    </script>

Поделиться4Вчера 23:07:18

Автор: Dick Summers
Красота скрывается в малом
Сообщений: 117
Уважение: +2
Последний визит:
Вчера 23:31:17

Код:

<!--HTML--><style>
.chest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1000px;
  margin: 30px auto;
  padding: 20px;
}

.chest-block {
  position: relative;
  height: 180px;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  border: 3px solid #5D4037;
  transition: all 0.3s ease;
}

.chest-block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(139, 0, 0, 0.3);
  transition: opacity 0.4s ease;
  z-index: 1;
}

.chest-block-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
  z-index: 2;
  transition: opacity 0.4s ease;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
}

.chest-number {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 8px;
  font-family: 'Times New Roman', serif;
}

.chest-status {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

.chest-hover {
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  z-index: 2;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
  transition: opacity 0.4s ease;
}

.chest-block:hover {
  border-color: #D32F2F;
  transform: scale(1.05);
}

.chest-block:hover::before {
  background: rgba(139, 0, 0, 0.7);
}

.chest-block:hover .chest-block-content {
  opacity: 0;
}

.chest-block:hover .chest-hover {
  opacity: 1;
}

/* Стили для занятых шкатулок */
.chest-taken {
  border-color: #757575;
  opacity: 0.7;
  cursor: not-allowed;
}

.chest-taken::before {
  background: rgba(0, 0, 0, 0.6);
}

.chest-taken:hover {
  transform: none;
  border-color: #757575;
}

.chest-taken:hover .chest-block-content {
  opacity: 1;
}

.chest-taken:hover .chest-hover {
  opacity: 0;
}

/* Фоновые изображения шкатулок */
.chest-1 { background: url('ВАША_КАРТИНКА_1') center/cover; }
.chest-2 { background: url('ВАША_КАРТИНКА_2') center/cover; }
.chest-3 { background: url('ВАША_КАРТИНКА_3') center/cover; }
.chest-4 { background: url('ВАША_КАРТИНКА_4') center/cover; }
.chest-5 { background: url('ВАША_КАРТИНКА_5') center/cover; }
.chest-6 { background: url('ВАША_КАРТИНКА_6') center/cover; }
.chest-7 { background: url('ВАША_КАРТИНКА_7') center/cover; }
.chest-8 { background: url('ВАША_КАРТИНКА_8') center/cover; }
.chest-9 { background: url('ВАША_КАРТИНКА_9') center/cover; }
.chest-10 { background: url('ВАША_КАРТИНКА_10') center/cover; }
.chest-11 { background: url('ВАША_КАРТИНКА_11') center/cover; }
.chest-12 { background: url('ВАША_КАРТИНКА_12') center/cover; }
.chest-13 { background: url('ВАША_КАРТИНКА_13') center/cover; }

/* Запасные цвета если картинки не загрузятся */
.chest-1 { background-color: #8B4513; }
.chest-2 { background-color: #A0522D; }
.chest-3 { background-color: #CD853F; }
.chest-4 { background-color: #8B4513; }
.chest-5 { background-color: #A0522D; }
.chest-6 { background-color: #CD853F; }
.chest-7 { background-color: #8B4513; }
.chest-8 { background-color: #A0522D; }
.chest-9 { background-color: #CD853F; }
.chest-10 { background-color: #8B4513; }
.chest-11 { background-color: #A0522D; }
.chest-12 { background-color: #CD853F; }
.chest-13 { background-color: #8B4513; }
</style>

<div class="chest-grid">
  <!-- Шкатулка 1 -->
  <div class="chest-block chest-1" onclick="selectChest(1)">
    <div class="chest-block-content">
      <div class="chest-number">01</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <!-- Шкатулка 2 -->
  <div class="chest-block chest-2" onclick="selectChest(2)">
    <div class="chest-block-content">
      <div class="chest-number">02</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <!-- Шкатулка 3 -->
  <div class="chest-block chest-3" onclick="selectChest(3)">
    <div class="chest-block-content">
      <div class="chest-number">03</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <!-- Повторите для остальных шкатулок 4-13 -->
  <div class="chest-block chest-4" onclick="selectChest(4)">
    <div class="chest-block-content">
      <div class="chest-number">04</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <div class="chest-block chest-5" onclick="selectChest(5)">
    <div class="chest-block-content">
      <div class="chest-number">05</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <div class="chest-block chest-6" onclick="selectChest(6)">
    <div class="chest-block-content">
      <div class="chest-number">06</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <div class="chest-block chest-7" onclick="selectChest(7)">
    <div class="chest-block-content">
      <div class="chest-number">07</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <div class="chest-block chest-8" onclick="selectChest(8)">
    <div class="chest-block-content">
      <div class="chest-number">08</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <div class="chest-block chest-9" onclick="selectChest(9)">
    <div class="chest-block-content">
      <div class="chest-number">09</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <div class="chest-block chest-10" onclick="selectChest(10)">
    <div class="chest-block-content">
      <div class="chest-number">10</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <div class="chest-block chest-11" onclick="selectChest(11)">
    <div class="chest-block-content">
      <div class="chest-number">11</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <div class="chest-block chest-12" onclick="selectChest(12)">
    <div class="chest-block-content">
      <div class="chest-number">12</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
  
  <div class="chest-block chest-13" onclick="selectChest(13)">
    <div class="chest-block-content">
      <div class="chest-number">13</div>
      <div class="chest-status">Свободна</div>
    </div>
    <div class="chest-hover">Выбрать эту шкатулку</div>
  </div>
</div>

<script>
function selectChest(number) {
    const message = `Участвую! Беру шкатулку номер ${number}.`;
    prompt('Скопируйте это сообщение и отправьте в теме:', message);
    
    // В реальном использовании вы будете вручную добавлять класс chest-taken
    // к выбранной шкатулке через редактирование поста
}
</script>

Поделиться5Вчера 23:26:10

Автор: Dick Summers
Красота скрывается в малом
Сообщений: 117
Уважение: +2
Последний визит:
Вчера 23:31:17

Код:

<!--HTML--><style>
@import url('https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap');

/* Основные стили */
.contest-container {
  max-width: 1000px;
  margin: 0 auto;
  font-family: 'Philosopher', sans-serif;
  color: #e0e0e0;
}

.header-image {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 20px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.7);
}

.atmospheric-post {
  background: linear-gradient(135deg, #2c1a1a 0%, #1a1a2e 100%);
  padding: 30px;
  border-radius: 10px;
  margin: 20px 0;
  border-left: 4px solid #8B0000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  line-height: 1.6;
}

/* Стили для раскрывающихся блоков */
.spoiler {
  margin: 25px 0;
}

.spoiler-header {
  background: linear-gradient(135deg, #8B0000 0%, #4a0000 100%);
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 18px;
  font-weight: bold;
  border: none;
  width: 100%;
  text-align: left;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.spoiler-header:hover {
  background: linear-gradient(135deg, #a52a2a 0%, #5a0000 100%);
  transform: translateY(-2px);
}

.spoiler-content {
  background: rgba(40, 40, 40, 0.9);
  padding: 0;
  border-radius: 0 0 8px 8px;
  margin-top: 2px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

.spoiler-content.open {
  max-height: 2000px;
  padding: 25px;
}

.arrow {
  transition: transform 0.3s ease;
}

.arrow.open {
  transform: rotate(180deg);
}

/* Стили для шкатулок */
.chest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin: 20px 0;
}

.chest-block {
  position: relative;
  height: 180px;
  overflow: hidden;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.chest-block:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(139, 0, 0, 0.4);
}

.chest-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.chest-block:hover .chest-image {
  transform: scale(1.1);
}

.chest-info {
  text-align: center;
  margin-top: 10px;
  font-family: 'Philosopher', sans-serif;
}

.chest-number {
  font-size: 16px;
  font-weight: bold;
  color: #ff6b6b;
  margin-bottom: 4px;
}

.chest-status {
  font-size: 16px;
  font-weight: bold;
  color: #2E8B57;
  text-transform: uppercase;
}

.chest-taken .chest-status {
  color: #DC143C;
}

/* Фон для запасных вариантов */
.chest-1 { background: #8B4513; }
.chest-2 { background: #A0522D; }
.chest-3 { background: #CD853F; }
.chest-4 { background: #8B4513; }
.chest-5 { background: #A0522D; }
.chest-6 { background: #CD853F; }
.chest-7 { background: #8B4513; }
.chest-8 { background: #A0522D; }
.chest-9 { background: #CD853F; }
.chest-10 { background: #8B4513; }
.chest-11 { background: #A0522D; }
.chest-12 { background: #CD853F; }
.chest-13 { background: #8B4513; }
</style>

<div class="contest-container">

<!-- Атмосферная картинка -->
<img src="https://via.placeholder.com/1000x300/2c1a1a/ffffff?text=Хэллуинская+Церковь+Кошмаров" 
     alt="Хэллуинская церковь" 
     class="header-image">

<!-- Атмосферный пост -->
<div class="atmospheric-post">
  <p>Ты открываешь глаза.</p>
  
  <p>Тишина. Только ветер завывает в разбитых витражах, касаясь лица, принося с собой запах сырой земли, костра и чего-то ещё — сладковато-железного, древнего.<br>
  Ты лежишь на холодных каменных плитах… и лишь спустя миг понимаешь — это не просто плиты. Это могилы.</p>
  
  <p>Мир вокруг растворён в темноте, но глаза постепенно привыкают к мраку.<br>
  Перед тобой вырастает силуэт церкви — мёртвой, застывшей, будто сама она выдохлась от времени.<br>
  И вдруг, где-то за остриями шпилей, вспыхивает крошечный огонёк. Он дрожит, зовёт, манит — словно обещает тепло и ответы.</p>
  
  <p>Ты делаешь шаг. И каждый следующий звучит громче, чем хотелось бы, будто кто-то незримый слушает и считает твои шаги.</p>
  
  <p>Из глубины церкви доносится смех — тихий, детский, как звон колокольчиков.<br>
  Он отзывается эхом в груди, смешивая леденящий страх и странное, пожирающее любопытство.</p>
  
  <p>Ты входишь внутрь.<br>
  Под обвалившимся куполом — статуя ангела. Каменные крылья укутаны паутиной забвения, а по мраморным щекам текут алые следы — не краска, не ржавчина… что-то живое, пульсирующее.<br>
  У ног ангела, на пьедестале из костей и времени, стоят они — шкатулки.</p>
  
  <p style="text-align: center; font-style: italic; color: #ff6b6b;">
    Твой кошмар только начинается...
  </p>
</div>

<!-- Правила под катом -->
<div class="spoiler">
  <button class="spoiler-header" onclick="toggleSpoiler(this)">
    📜 Тёмные Законы Ритуала (Правила)
    <span class="arrow">▼</span>
  </button>
  <div class="spoiler-content">
    <h3>Правила «Шкатулки Кошмаров»</h3>
    <p>Перед вами — тринадцать шкатулок. Каждая хранит внутри не просто предмет, а зародыш кошмара. Ваша задача — выпустить его на волю.</p>
    
    <ol>
      <li><strong>Выбор:</strong> Чтобы участвовать, напишите в этой теме комментарий: <code>«Участвую! Беру шкатулку номер [X]»</code>, где X — число от 1 до 13.</li>
      <li><strong>Откровение:</strong> После записи я найду вас в <strong>ЛС</strong> и открою предмет, скрывающийся в вашей шкатулке.</li>
      <li><strong>Воплощение:</strong> Напишите рассказ ужаса <strong>от 1500 до 5000 знаков</strong>, где этот предмет играет ключевую роль.</li>
      <li><strong>Жертва:</strong> Готовые работы присылайте мне в <strong>ЛС до 7 ноября, 23:59 (МСК)</strong>.</li>
      <li><strong>Суд:</strong> Все рассказы будут вывешены для анонимного голосования и отгадывания авторов.</li>
    </ol>
    
    <h4>Награды для избранных:</h4>
    <ul>
      <li>🏆 <strong>Властелин Кошмаров</strong> (1 место) — уникальный титул + главная награда</li>
      <li>👻 <strong>Песнь Теней</strong> (2 место) — почетный титул + подачки из тьмы</li>
      <li>🎭 <strong>Шепот из Шкатулки</strong> (3 место) — титул + малая жертва</li>
      <li>🔮 <strong>Провидец Тьмы</strong> — титул для лучшего угадывателя авторов</li>
    </ul>
  </div>
</div>

<!-- Шкатулки под катом -->
<div class="spoiler">
  <button class="spoiler-header" onclick="toggleSpoiler(this)">
    🎁 Выбрать Шкатулку Кошмара (13 доступно)
    <span class="arrow">▼</span>
  </button>
  <div class="spoiler-content">
    <div style="text-align: center; margin-bottom: 20px;">
      <p><em>Выбери свою судьбу. Но помни: обратной дороги нет.</em></p>
    </div>
    
    <div class="chest-grid">
      <!-- Шкатулка 1 -->
      <div class="chest-block" onclick="selectChest(1)">
        <img src="ВАША_КАРТИНКА_1" alt="Шкатулка 1" class="chest-image">
        <div class="chest-info">
          <div class="chest-number">Шкатулка №01</div>
          <div class="chest-status">Свободна</div>
        </div>
      </div>
      
      <!-- Шкатулки 2-13 -->
      <div class="chest-block" onclick="selectChest(2)">
        <img src="ВАША_КАРТИНКА_2" alt="Шкатулка 2" class="chest-image">
        <div class="chest-info">
          <div class="chest-number">Шкатулка №02</div>
          <div class="chest-status">Свободна</div>
        </div>
      </div>
      
      <!-- Остальные шкатулки 3-13 по аналогии -->
      <div class="chest-block" onclick="selectChest(3)">
        <img src="ВАША_КАРТИНКА_3" alt="Шкатулка 3" class="chest-image">
        <div class="chest-info">
          <div class="chest-number">Шкатулка №03</div>
          <div class="chest-status">Свободна</div>
        </div>
      </div>
      
      <!-- Добавьте остальные 10 шкатулок по тому же шаблону -->
      
    </div>
    
    <div style="text-align: center; margin-top: 20px; font-style: italic;">
      <p>Церковь замерла в ожидании. Сделай свой выбор. Прикоснись к своему кошмару.</p>
    </div>
  </div>
</div>

</div>

<script>
function toggleSpoiler(button) {
  const content = button.nextElementSibling;
  const arrow = button.querySelector('.arrow');
  
  content.classList.toggle('open');
  arrow.classList.toggle('open');
}

function selectChest(number) {
  const message = `Участвую! Беру шкатулку номер ${number}.`;
  prompt('Скопируйте это сообщение для участия:', message);
}

// Автоматически открываем первый спойлер при загрузке
document.addEventListener('DOMContentLoaded', function() {
  const firstSpoiler = document.querySelector('.spoiler-header');
  if (firstSpoiler) {
    toggleSpoiler(firstSpoiler);
  }
});
</script>

Страница: 1

Церас - гоород твоей мечты и самых страшных кошмаров

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

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

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

Дик, 23 у.о.

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

Поделиться12018-08-12 11:37:24

Поделиться22025-10-01 18:43:31

Поделиться3Вчера 22:44:58

Поделиться4Вчера 23:07:18

Поделиться5Вчера 23:26:10