Хэллоуин — это время маскарада!
Выбирай себе образ — надень аватар любого героя \ предмет \ чего угодно на три дня и оставь сообщение во флуде, чтобы получить конфеты.
А если не можешь решить, в кого нарядиться — "загляни" в волшебное зеркало, оно подскажет, какой костюм тебе подойдет.
Но следовать его совету совсем не обязательно - можно надевать что хочется!

[html]
<div class="mirror" id="mirror">
  <div class="message-wrap">
    <div class="message-glow" id="message-glow"></div>
    <div class="message" id="message"></div>
  </div>
</div>

<style>
.mirror {
  position: relative;
  width: 300px;
  height: 397px;
  background: url('https://upforme.ru/uploads/001b/ff/2a/183/954376.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  margin: 0 auto;
  overflow: hidden;
}

/* Центрируем текст и эффект */
.message-wrap {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  text-align: center;
}

/* "Туман" под текстом — светлое свечение */
.message-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,240,0.9) 100%, rgba(255,255,220,0.45) 50%, rgba(255,255,240,0.1) 70%, transparent 60%);
  border-radius: 20px;
  filter: blur(20px);
  opacity: 1;
  transition: opacity 2s ease;
  z-index: 1;
}

.message-glow.visible {
  opacity: 1;
}

/* Текст на зеркале */
.message {
  position: relative;
  color: #000000;
  font-size: 19px;
  font-family: Amatic SC, serif;
  text-shadow: 5 5 5px rgba(255,255,255,0.5);
  opacity: 1;
  transition: opacity 2s ease;
  z-index: 2;
  line-height: 1.4;
  font-weight: bold;
  }

.message.visible {
  opacity: 1;
}
</style>

<script>
const messages = [
  "Герой из фильмов ужасов",
  "Кто-то из вселенной Гарри Поттера кроме вас",
  "Персонаж Disney",
  "Любимый герой из детства",
  "Супергерой / злодей из комиксов",
  "Персонаж классической литературы",
  "Кто-то из Хогвартса, но в другой эпохе",
  "Любое животное \ птица etc",
  "Какая-то вещь",
  "Персонаж сказки",
];

const mirror = document.getElementById("mirror");
const message = document.getElementById("message");
const glow = document.getElementById("message-glow");

mirror.addEventListener("click", () => {
  const randomMessage = messages[Math.floor(Math.random() * messages.length)];
  message.textContent = randomMessage;

  // Появление эффекта и текста
  glow.classList.add("visible");
  message.classList.add("visible");

  // Исчезает через 5 секунд
  setTimeout(() => {
    glow.classList.remove("visible");
    message.classList.remove("visible");
  }, 5000);
});
</script>
[/html]

Но не называя автора, названия и имён персонажей! Это описание мы так же будем использовать в задании на угадайку ниже.

Код:

[hide=9999999] Описание книги.
Название что за книга отдельно.[/hide]

Здесь иногда будут публиковаться описания книг - догадайтесь, что за книга, и напишите под скрытым текстом название.

обновлены 3.11 - 8.00

Код:

[spoiler="Свернутый текст"][hide=9999999]название книги[/hide][/spoiler]

1. Они летели обычным рейсом, пока не поняли, что мир за иллюминатором опустел. Аэропорт, где они приземлились, выглядел как декорация и все будто бы застыло, унося с собой и запахи, и вкусы. Но тишина — не главное зло. Издалека уже слышится странный хруст, будто кто-то жует само пространство. И тем, кто остался между прошлым и будущим, придется понять, что быть «не там» страшнее, чем быть нигде.

2.Действие книги происходит в городе вечной осени. Главный герой пытается разобраться в себе, открыть тайну своей личности и своего прошлого, и вместе с тем прожить тихий спокойный год. Но все идет наперекосяк, когда в городе начинают происходить странные вещи: старые правила перестают работать, а на смену осени пришло лето и таинственный незнакомец. Главный герой вместе с другими хтоническо-магическими существами объединяется, чтобы разобраться в ситуации. Вампир, боящийся крови, русалка на инвалидной коляске и королева фейри в комплекте..

Духи всегда говорят правду! Поговорите с ними и они расскажут, какую фразу вам нужно обязательно использовать в своем посте.
Да, можно кликать и выбрать фразу которую хочешь - без проблем :D
Нельзя использовать одному игроку одну и ту же фразу больше одного раза и 1 пост = 1 фраза.
Просто приносите ссылку на пост с фразой; без ограничения на количество постов.

[html]
<div id="ouija-container" style="position:relative; width:554px; max-width:90%; margin:30px auto; text-align:center; font-family:'Georgia',serif;"> <div id="ouija-inner" style="position:relative;"> <img src="https://upforme.ru/uploads/001b/ff/2a/183/850545.png" alt="Ouija Board" style="width:100%; border-radius:10px; box-shadow:0 0 25px rgba(240,200,100,0.35);"> <div id="planchette" style=" position:absolute; width:100px; height:100px; background:url('https://upforme.ru/uploads/001b/ff/2a/183/498308.png') no-repeat center/contain; top:55%; left:45%; transition: all 0.8s ease-in-out; cursor:pointer; opacity:0.95; filter:drop-shadow(0 0 10px rgba(255,220,100,0.3)); transform: translate(-50%, -50%) rotate(0deg); z-index:3; "></div> <div id="message" style=" position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); width:80%; text-align:center; font-size:18px; color:#fae5b0; text-shadow:0 0 25px rgba(255,220,150,0.8), 0 0 40px rgba(150,80,10,0.4); opacity:0; transition: opacity 2s ease; z-index:4; "></div> <div id="glow" style=" position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at 50% 50%, rgba(255,220,100,0.15), transparent 70%); opacity:0; transition:opacity 1s ease; border-radius:10px; pointer-events:none; z-index:2; "></div> </div> </div>

<script>
(function(){
  const container = document.querySelector('#ouija-container > div');
  const planchette = document.getElementById('planchette');
  const msgBox = document.getElementById('message');
  const glow = document.getElementById('glow');

  const messages = [
    "❝ Я ужас, летящий на крыльях ночи.❞",
    "❝ Да, человек смертен, но это было бы ещё полбеды. Плохо то, что он иногда внезапно смертен. ❞",
    "❝ Ибо, когда ты смотришь в бездну, бездна тоже смотрит в тебя. ❞",
    "❝ Ад пуст, и все дьяволы здесь. ❞",
    "❝ Ночь темна и полна ужасов. ❞",
    "❝ Я стал смертью, разрушителем миров. ❞",
    "❝ Я — часть той силы, что вечно хочет зла и вечно совершает благо. ❞",
    "❝ Там, где нет тьмы, нет и света. ❞",
    "❝ Всё, чего мы боимся, уже случилось. ❞",
    "❝ Мир — это странное место. Иногда кажется, что он создан для того, чтобы пугать нас. ❞",
    "❝ Магия — это просто наука, которую мы ещё не поняли. ❞",
    "❝ Всё проходит, но не всё забывается. ❞",
    "❝ Ад — это не место, а состояние души. ❞",
    "❝ Смерть — лишь начало вечности. ❞",
    "❝ Истинное безумие — не знать, что ты безумен. ❞",
    "❝ У всех Хэллоуин каждый год. У меня — каждый вечер.❞",
    "❝ Знаете, что делать, если на Хэллоуин в дом забрались воры? Дать им по тыкве. ❞",
    "❝ Филч проверил замки трижды, но снова пропал скелет из главного холла! ❞",
    "❝ Говорят, одна из тыкв моргнула. ❞",
    "❝ Над башней астрономии снова видели летающую метлу без всадника. ❞",
    "❝ Кровавый Барон обещал никого не пугать. Он соврал. ❞",
    "❝ Мадам Помфри просила не приносить части скелетов после праздника. ❞",
    "❝ Кто-то съел пирог, который предупреждал его не есть... ❞",
    "❝ Из кабинета зельеварения доносится смех... Очень страшно. ❞",
    "❝ Плакса Миртл приглашает всех к себе в туалет… на вечеринку. ❞",
    "❝ Не забудь угостить конфетами приведений — у них длинная память. ❞",
    "❝ Осторожнее с зеркалами — иногда они отражают не только тебя. ❞",
    "❝ Хэллоуин в Хогвартсе — когда даже портреты могут выдать конфеты... нарисованные.❞"
  ];

  function getBounds() {
    const boardRect = container.getBoundingClientRect();
    const planRect = planchette.getBoundingClientRect();
    return {
      boardWidth: boardRect.width,
      boardHeight: boardRect.height,
      planW: planRect.width,
      planH: planRect.height
    };
  }

  function pctToPx(pxTotal, pct, elementSize) {
    const margin = elementSize / 2;
    return margin + ((pxTotal - elementSize) * (pct / 100));
  }

  function moveToPercent(px, py, rotateDeg=0) {
    const bounds = getBounds();
    const leftPx = pctToPx(bounds.boardWidth, px, bounds.planW);
    const topPx  = pctToPx(bounds.boardHeight, py, bounds.planH);
    planchette.style.left = leftPx + 'px';
    planchette.style.top  = topPx  + 'px';
    planchette.style.transform = `translate(-50%,-50%) rotate(${rotateDeg}deg)`;
  }

  function walkAcrossLetters(steps, onDone) {
    const baseYmin = 20;
    const baseYmax = 50;
    let delay = 0;
    for (let i = 0; i < steps; i++) {
      setTimeout(() => {
        const px = Math.random() * 80 + 10;
        const py = Math.random() * (baseYmax - baseYmin) + baseYmin;
        const rot = Math.random() * 30 - 15;
        moveToPercent(px, py, rot);
      }, delay);
      delay += 500 + Math.random() * 300;
    }
    setTimeout(onDone, delay + 200);
  }

  planchette.addEventListener('click', function() {
    msgBox.style.opacity = 0;
    glow.style.opacity = 1;
    const steps = Math.floor(Math.random() * 3) + 3;

    walkAcrossLetters(steps, () => {
      const finalX = Math.random() * 80 + 10;
      const finalY = Math.random() * 60 + 30;
      const rot = Math.random() * 10 - 5;
      moveToPercent(finalX, finalY, rot);

      planchette.style.transition = 'left 0.25s ease, top 0.25s ease, transform 0.2s ease';
      setTimeout(()=> {
        planchette.style.transform = `translate(-50%,-50%) rotate(${rot+6}deg)`;
        setTimeout(()=> {
          planchette.style.transform = `translate(-50%,-50%) rotate(${rot-4}deg)`;
          setTimeout(()=> {
            planchette.style.transform = `translate(-50%,-50%) rotate(${rot}deg)`;

            const msg = messages[Math.floor(Math.random() * messages.length)];
            msgBox.innerHTML = msg;
            msgBox.style.opacity = 1;

            setTimeout(()=> { glow.style.opacity = 0; }, 800);
           setTimeout(()=> {
  planchette.style.transition = 'left 0.6s cubic-bezier(.2,.8,.2,1), top 0.6s cubic-bezier(.2,.8,.2,1), transform 0.6s ease';
 
  // через пару секунд планшетка плавно возвращается к центру (немного ниже надписи)
  setTimeout(() => {
    moveToPercent(45, 80, 0); // 50% по горизонтали, 65% по вертикали — можно подправить
  });
});
          }, 200);
        }, 200);
      }, 250);
    });
  });

  window.addEventListener('load', () => {
    moveToPercent(50, 55, 0);
  });
})();
</script>

[/html]

Выбирай вкусные хэллоинские кексики... иногда с сюрпризом!
Чтобы выбрать лот, приносите ссылку на пост, 1 пост = 1 лот, без ограничений на количество постов.
Вас ждут как призы, так и мини-задания.

01	02	-- 03	-- 04	05	06	-- 07	-- 08
09	10	11	-- 12	-- 13	14	15	-- 16
-- 17	18	-- 19	20	-- 21	-- 22	-- 23	-- 24
25	26	-- 27	28	-- 29	-- 30	31	32
-- 33	34	-- 35	-- 36	-- 37	-- 38	-- 39	-- 40

[html]<iframe src="https://www.jigsawplanet.com/?rc=play&amp;pid=2a68e3834513&amp;view=iframe" style="width:100%;height:600px" frameborder="0" allowfullscreen></iframe>[/html]

Каждый день здесь будут публиковаться 2-3 кадра из фильмов - напишите названия фильмов под скрытым текстом!
обновлены 3.11 - 8.00 утра

Код:

[spoiler="Свернутый текст"][hide=9999999]название фильма[/hide][/spoiler]

1.

2.