[html]<!-- =========================================================
ИВЕНТ-КАЛЕНДАРЬ 2026
========================================================= -->
<div id="cozy-calendar-2026">
<div class="cc-shell">
<!-- =========================
ШАПКА
========================= -->
<header class="cc-header">
<div class="cc-header__title">
<span class="cc-header__ornament">✦</span>
<div>
<div class="cc-title">ТеплоОсень</div>
<div class="cc-subtitle">Ивент-календарь · 2026</div>
</div>
<span class="cc-header__ornament">✦</span>
</div>
<div class="cc-header__description">
Сорок осенних дней и заданий, подарков и уютных поводов заглянуть сюда снова ♥
</div>
<!-- ПРАВИЛА -->
<div class="cc-rules">
<div class="cc-rules__title">
<span>☙</span>Правила и пояснения<span>❧</span>
</div>
<div class="cc-rules__grid">
<div class="cc-rule">
<span class="cc-rule__icon">01</span>
<span><b>Каждый день открывается новое задание и награда.</b> <br>
☆ Подарки можно получить либо для себя, либо для другого игрока.<br>
☆ Получить их можно выполнив задание.<br>
☆ Помимо полученных подарков, в итоге ивента все получают классическое финансовое вознаграждение: 1 день = 10 баксам.</span>
</div>
<div class="cc-rule">
<span class="cc-rule__icon">02</span>
<span><b>Порядок: <br>➜ чтобы открыть задание и подарок <u>щелкаем по ячейке</u> нового дня (откроется окошко с содержимым) <br>➜ заполняем ответ по шаблону в конце поста.</b></span>
</div>
<div class="cc-rule">
<span class="cc-rule__icon">03</span>
<span> Вы не будете знать заранее какой подарок под каждым блоком.</span>
</div>
<div class="cc-rule">
<span class="cc-rule__icon">04</span>
<span>Новый день наступает в <b>00:00 по Москве.</b></span>
</div>
<div class="cc-rule">
<span class="cc-rule__icon">05</span>
<span>Подарок каждого дня вам доступен лишь один раз (кроме некоторых исключений, о которых будет написано в карточке задания) — то есть либо взять себе, либо отправить его одному другому игроку.</span>
</div>
<div class="cc-rule">
<span class="cc-rule__icon">06</span>
<span>Ответы и выполненные задания публикуем по правилам ивента. Принимаются расширенные ответы на задания (ответы "да"/"нет" - не подходят): нужно рассказать почему/приложить фото/название и т.п. в зависимости от задания.</span>
</div>
<div class="cc-rule">
<span class="cc-rule__icon">07</span>
<span>Ответы на задания можно заполнять и твинами, но подарок доступен только <u>один раз каждому игроку</u> (за твинов нельзя забрать подарок, если вы уже взяли его за своего другого персонажа).</span>
</div>
<div class="cc-rule">
<span class="cc-rule__icon">08</span>
<span>Все ответы на задания выкладываются в эту тему. <br>
В ответах на задания приветствуются картинки и музыка (убираем под спойлер, бережём трафик друг друга).</span>
</div>
<div class="cc-rule">
<span class="cc-rule__icon">09</span>
<span>Задания можно выполнять даже если вы пропустили день.</span>
</div>
<div class="cc-rule">
<span class="cc-rule__icon">10</span>
<span>P.S. Скорее всего, подарки будут раздаваться по выходным. Просим о понимании и терпении.</span>
</div>
</div>
</div>
</header>
<!-- =========================КАЛЕНДАРЬ========================= -->
<main class="cc-calendar">
<!-- =========================
01–08
КНИЖНЫЙ УГОЛОК
========================= -->
<section class="cc-theme cc-theme--books">
<div class="cc-theme__head">
<div class="cc-theme__icon"><img src="https://i.imgur.com/GOz36am.png" alt=""></div>
<div class="cc-theme__info">
<div class="cc-theme__number">ТЕМА I · ДНИ 01—08</div>
<h2>Книжный уголок</h2>
<p>Дорогие сердцу истории, цитаты и немного литературного уюта. И конечно Котики.</p>
</div>
</div>
<div class="cc-grid" data-start="1" data-end="8"></div>
</section>
<!-- =========================
09–16
ДОМАШНИЙ САД
========================= -->
<section class="cc-theme cc-theme--garden">
<div class="cc-theme__head">
<div class="cc-theme__icon"><img src="https://i.imgur.com/3YoCc68.png" alt=""></div>
<div class="cc-theme__info">
<div class="cc-theme__number">ТЕМА II · ДНИ 09—16</div>
<h2>Домашний сад</h2>
<p>Оранжерея и любимые растения, небольшие садовые радости и немного зелени.</p>
</div>
</div>
<div class="cc-grid" data-start="9" data-end="16"></div>
</section>
<!-- =========================
17–24
КОФЕЙНЫЕ РИТУАЛЫ
========================= -->
<section class="cc-theme cc-theme--coffee">
<div class="cc-theme__head">
<div class="cc-theme__icon"><img src="https://i.imgur.com/oU9iHGy.png" alt=""></div>
<div class="cc-theme__info">
<div class="cc-theme__number">ТЕМА III · ДНИ 17—24</div>
<h2>Кофейные ритуалы</h2>
<p>Согревающие горячие чашки, аромат кофе и важные ежедневные ритуалы.</p>
</div>
</div>
<div class="cc-grid" data-start="17" data-end="24"></div>
</section>
<!-- =========================
25–32
ДЕКОР ДОМА
========================= -->
<section class="cc-theme cc-theme--decor">
<div class="cc-theme__head">
<div class="cc-theme__icon"><img src="https://i.imgur.com/Vcl18N7.png" alt=""></div>
<div class="cc-theme__info">
<div class="cc-theme__number">ТЕМА IV · ДНИ 25—32</div>
<h2>Декор дома</h2>
<p>Уют состоит из деталей: свечи, мягкие пледы, любимая посуда и осеннее настроение.</p>
</div>
</div>
<div class="cc-grid" data-start="25" data-end="32"></div>
</section>
<!-- =========================
33–40
КУЛИНАРИЯ
========================= -->
<section class="cc-theme cc-theme--cooking">
<div class="cc-theme__head">
<div class="cc-theme__icon"><img src="https://i.imgur.com/S6E21OC.png" alt=""></div>
<div class="cc-theme__info">
<div class="cc-theme__number">ТЕМА V · ДНИ 33—40</div>
<h2>Кулинария</h2>
<p>Вкусные рецепты, выпечка и специи, необычные эксперименты на кухне.</p>
</div>
</div>
<div class="cc-grid" data-start="33" data-end="40"></div>
</section>
<!-- =====================================================
ШАБЛОН ДЛЯ ПОДАРКА
===================================================== -->
<div class="cc-gift-template">
<div class="cc-gift-template__title"><span>✦</span>Возьми меня и заполни<span>✦</span></div>
<div class="cc-task-code" role="button" tabindex="0">День №
1. Кому подарок:
2. Подпись:
3. Выполненное задание:</div>
<div class="cc-task-hint">✦ нажмите, чтобы скопировать шаблон ✦</div>
</div>
</main>
</div>
<!-- =====================================================
МОДАЛЬНОЕ ОКНО
===================================================== -->
<div class="cc-modal-bg" id="cc-modal-bg">
<div class="cc-modal" id="cc-modal">
<button class="cc-modal__close"
type="button"
aria-label="Закрыть"
>×</button>
<div class="cc-modal__day" id="cc-modal-day"></div>
<div class="cc-modal__title" id="cc-modal-title"></div>
<div class="cc-modal__image" id="cc-modal-image"></div>
<div class="cc-modal__gift" id="cc-modal-gift"></div>
<div class="cc-modal__task-title">ЗАДАНИЕ</div>
<div class="cc-modal__task" id="cc-modal-task"></div>
</div>
</div>
</div>
<style>
@font-face {
font-family: "Gesmont";
src:
local("Gesmont"),
url("https://forumstatic.ru/files/001a/e7/a4/77391.woff")
format("woff"),
url("https://forumstatic.ru/files/001a/e7/a4/38431.ttf")
format("truetype");
font-weight: normal;
font-style: normal;
}
/* =========================================================
ВНУТРИ #cozy-calendar-2026
========================================================= */
#cozy-calendar-2026 {
--cc-bg: #241c19;
--cc-bg-dark: #1a1412;
--cc-panel: #302521;
--cc-panel-light: #392d28;
--cc-text: #eee4d8;
--cc-muted: #bba99b;
--cc-gold: #c7a77a;
--cc-gold-light: #e3cda8;
--cc-line: rgba(227, 205, 168, .28);
width: 100%;
max-width: 1180px;
margin: 30px auto;
font-family: "Georgia", serif;
color: var(--cc-text);
box-sizing: border-box;
}
#cozy-calendar-2026 *,
#cozy-calendar-2026 *::before,
#cozy-calendar-2026 *::after {
box-sizing: border-box;
}
/* =========================================================
ОБЩИЙ КОНТЕЙНЕР
========================================================= */
#cozy-calendar-2026 .cc-shell {
position: relative;
width: 100%;
padding: 22px;
background:
radial-gradient(
circle at 20% 10%,
rgba(199,167,122,.08),
transparent 30%
),
radial-gradient(
circle at 80% 90%,
rgba(199,167,122,.06),
transparent 35%
),
linear-gradient(
145deg,
#2d231f,
#211916 55%,
#2a201c
);
border: 1px solid rgba(227,205,168,.25);
box-shadow:
0 20px 60px rgba(0,0,0,.35),
inset 0 0 0 1px rgba(255,255,255,.025);
overflow: hidden;
}
/* внутренняя рамка */
#cozy-calendar-2026 .cc-shell::before {
content: "";
position: absolute;
inset: 8px;
pointer-events: none;
border: 1px solid rgba(227,205,168,.09);
}
/* =========================================================
ШАПКА
========================================================= */
#cozy-calendar-2026 .cc-header {
position: relative;
padding: 8px 12px 20px;
text-align: center;
}
/* заголовок */
#cozy-calendar-2026 .cc-header__title {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin-bottom: 8px;
}
#cozy-calendar-2026 .cc-header__ornament {
color: var(--cc-gold);
font-size: 20px;
opacity: .8;
}
#cozy-calendar-2026 .cc-title {
color: var(--cc-gold-light);
font-size: clamp(28px, 4vw, 46px);
line-height: 1;
letter-spacing: .06em;
text-transform: uppercase;
text-shadow:
0 2px 15px rgba(199,167,122,.18);
}
#cozy-calendar-2026 .cc-subtitle {
margin-top: 8px;
color: var(--cc-muted);
font-size: 12px;
letter-spacing: .28em;
text-transform: uppercase;
}
#cozy-calendar-2026 .cc-header__description {
max-width: 650px;
margin: 0 auto 18px;
color: #cbbcb0;
font-size: 14px;
line-height: 1.65;
}
/* =========================================================
ПРАВИЛА
========================================================= */
#cozy-calendar-2026 .cc-rules {
padding: 14px 16px 16px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.035),
rgba(0,0,0,.08)
);
border: 1px solid var(--cc-line);
}
#cozy-calendar-2026 .cc-rules__title {
margin-bottom: 13px;
color: var(--cc-gold-light);
font-size: 12px;
letter-spacing: .2em;
text-transform: uppercase;
}
#cozy-calendar-2026 .cc-rules__title span {
margin: 0 6px;
color: var(--cc-gold);
}
#cozy-calendar-2026 .cc-rules__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 22px;
text-align: left;
}
#cozy-calendar-2026 .cc-rule {
display: flex;
align-items: flex-start;
gap: 9px;
color: #bdaea3;
font-size: 13px;
line-height: 1.45;
}
#cozy-calendar-2026 .cc-rule__icon {
flex: 0 0 24px;
color: var(--cc-gold);
font-size: 9px;
letter-spacing: .08em;
padding-top: 2px;
}
/* ==========================КАЛЕНДАРЬ========================= */
#cozy-calendar-2026 .cc-calendar {
position: relative;
display: flex;
flex-direction: column;
gap: 18px;
}
/* =========================================================
ТЕМАТИЧЕСКИЙ БЛОК
========================================================= */
#cozy-calendar-2026 .cc-theme {
position: relative;
padding: 15px 15px 16px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.035),
rgba(0,0,0,.12)
);
border: 1px solid rgba(227,205,168,.17);
}
/* небольшая верхняя линия */
#cozy-calendar-2026 .cc-theme::before {
content: "";
position: absolute;
left: 15px;
right: 15px;
top: 0;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(227,205,168,.5),
transparent
);
}
/* ============================ЗАГОЛОВОК ТЕМЫ============================ */
#cozy-calendar-2026 .cc-theme__head {
display: grid !important;
grid-template-columns: 60px minmax(0, 1fr);
column-gap: 16px;
align-items: center;
width: 100%;
margin: 0 0 13px;
padding: 0 0 11px;
text-align: left !important;
border-bottom: 1px solid rgba(227,205,168,.13);
}
#cozy-calendar-2026 .cc-theme__icon {
grid-column: 1;
width: 60px;
height: 60px;
margin: 0 !important;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
background: rgba(0,0,0,.16);
border: 1px solid rgba(227,205,168,.2);
}
#cozy-calendar-2026 .cc-theme__info {
grid-column: 2;
width: 100%;
min-width: 0;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
#cozy-calendar-2026 .cc-theme__number {
text-align: left !important;
}
#cozy-calendar-2026 .cc-theme__info h2 {
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
#cozy-calendar-2026 .cc-theme__icon img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
#cozy-calendar-2026 .cc-theme__number {
margin-bottom: 2px;
color: var(--cc-gold);
font-size: 9px;
letter-spacing: .18em;
text-transform: uppercase;
}
#cozy-calendar-2026 .cc-theme h2 {
margin: 0;
color: #eadfd4;
font-size: 21px;
font-weight: normal;
letter-spacing: .04em;
}
#cozy-calendar-2026 .cc-theme p {
margin: 3px 0 0;
color: #9f9086;
font-size: 11px;
line-height: 1.35;
}
/* =================СЕТКА================== */
#cozy-calendar-2026 .cc-grid {
display: grid;
grid-template-columns:
repeat(8, minmax(0, 1fr));
gap: 8px;
width: 100%;
}
/* ==============ЯЧЕЙКА================ */
#cozy-calendar-2026 .cc-day {
position: relative;
aspect-ratio: 1 / 1;
min-width: 0;
padding: 5px;
border: 1px solid rgba(227,205,168,.18);
background:
linear-gradient(
145deg,
#382b26,
#29201d
);
color: var(--cc-text);
cursor: pointer;
overflow: hidden;
transition:
transform .22s ease,
border-color .22s ease,
box-shadow .22s ease,
background .22s ease;
}
/* декоративная полоска */
#cozy-calendar-2026 .cc-day::before {
content: "";
position: absolute;
left: 7px;
right: 7px;
bottom: 6px;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(227,205,168,.22),
transparent
);
}
/* уголок */
#cozy-calendar-2026 .cc-day::after {
content: "";
position: absolute;
width: 17px;
height: 17px;
right: -8px;
top: -8px;
border-radius: 50%;
background: rgba(227,205,168,.12);
}
/* номер */
#cozy-calendar-2026 .cc-day__number {
position: absolute;
left: 7px;
top: 3px;
color: var(--cc-gold-light);
font-family: "Gesmont", Georgia, serif;
font-size: clamp(28px, 3.5vw, 43px);
font-weight: normal;
line-height: 1;
z-index: 2;
}
/* маленькая подпись */
#cozy-calendar-2026 .cc-day__label {
position: absolute;
left: 8px;
bottom: 12px;
color: #a89587;
font-size: 8px;
letter-spacing: .12em;
text-transform: uppercase;
z-index: 2;
}
/* иконка */
#cozy-calendar-2026 .cc-day__icon {
position: absolute;
right: 7px;
bottom: 9px;
font-size: 18px;
opacity: .8;
z-index: 2;
}
/* ============================HOVER============================= */
#cozy-calendar-2026 .cc-day:not(.is-locked):hover {
transform: translateY(-3px);
border-color: rgba(227,205,168,.55);
background:
linear-gradient(
145deg,
#43332b,
#2d211d
);
box-shadow:
0 8px 20px rgba(0,0,0,.28),
inset 0 0 18px rgba(227,205,168,.035);
}
/* ======================ЗАКРЫТЫЙ ДЕНЬ=========================== */
#cozy-calendar-2026 .cc-day.is-locked {
cursor: default;
background:
linear-gradient(
145deg,
#28211e,
#211a18
);
border-color: rgba(255,255,255,.07);
}
#cozy-calendar-2026 .cc-day.is-locked
.cc-day__number {
color: #655b55;
}
#cozy-calendar-2026 .cc-day.is-locked
.cc-day__icon {
opacity: .25;
filter: grayscale(1);
}
#cozy-calendar-2026 .cc-day.is-locked
.cc-day__label {
color: #5e554f;
}
/* замочек */
#cozy-calendar-2026 .cc-day__lock {
position: absolute;
right: 7px;
top: 7px;
color: #70645c;
font-size: 11px;
z-index: 3;
}
/* ===========================ОТКРЫТЫЙ ДЕНЬ========================== */
#cozy-calendar-2026 .cc-day.is-open {
border-color: rgba(199,167,122,.27);
}
/* сегодняшний */
#cozy-calendar-2026 .cc-day.is-today {
border-color: var(--cc-gold);
box-shadow:
0 0 0 1px rgba(199,167,122,.16),
0 0 18px rgba(199,167,122,.08);
}
#cozy-calendar-2026 .cc-day.is-today::before {
background:
linear-gradient(
90deg,
transparent,
var(--cc-gold),
transparent
);
}
/* =======================МОДАЛЬНЫЙ ФОН======================== */
#cozy-calendar-2026 .cc-modal-bg {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
background: rgba(15,10,8,.48);
}
#cozy-calendar-2026 .cc-modal-bg.is-visible {
display: block;
}
/* ===========================МОДАЛЬНОЕ ОКНО=========================== */
#cozy-calendar-2026 .cc-modal {
position: absolute;
width: 350px;
max-width: calc(100vw - 20px);
max-height: calc(100vh - 20px);
padding: 20px;
overflow-y: auto;
background:
radial-gradient(
circle at 80% 10%,
rgba(199,167,122,.09),
transparent 35%
),
linear-gradient(
145deg,
#332721,
#211916
);
border: 1px solid rgba(227,205,168,.4);
box-shadow:
0 18px 50px rgba(0,0,0,.55),
inset 0 0 0 1px rgba(255,255,255,.025);
opacity: 0;
transform: translateY(5px);
transition:
opacity .18s ease,
transform .18s ease;
}
#cozy-calendar-2026 .cc-modal.is-active {
opacity: 1;
transform: translateY(0);
}
/* ======================ЗАКРЫТИЕ======================== */
#cozy-calendar-2026 .cc-modal__close {
position: absolute;
right: 9px;
top: 7px;
width: 28px;
height: 28px;
padding: 0;
border: 0;
background: transparent;
color: #a9978a;
font-size: 24px;
line-height: 28px;
cursor: pointer;
}
#cozy-calendar-2026 .cc-modal__close:hover {
color: var(--cc-gold-light);
}
/* =========================================================
СОДЕРЖИМОЕ МОДАЛКИ
========================================================= */
#cozy-calendar-2026 .cc-modal__day {
color: var(--cc-gold);
font-size: 9px;
letter-spacing: .2em;
text-transform: uppercase;
margin-bottom: 7px;
}
#cozy-calendar-2026 .cc-modal__title {
padding-right: 25px;
color: #eee1d5;
font-size: 25px;
line-height: 1.15;
}
#cozy-calendar-2026 .cc-modal__image {
display: flex;
align-items: center;
justify-content: center;
width: 85px;
height: 85px;
margin: 16px auto;
font-size: 40px;
background: rgba(0,0,0,.15);
border: 1px solid rgba(227,205,168,.18);
}
#cozy-calendar-2026 .cc-modal__gift {
margin-bottom: 17px;
padding: 10px;
text-align: center;
color: var(--cc-gold-light);
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
background: rgba(199,167,122,.07);
border-top: 1px solid rgba(227,205,168,.16);
border-bottom: 1px solid rgba(227,205,168,.16);
}
#cozy-calendar-2026 .cc-modal__task-title {
margin-bottom: 5px;
color: var(--cc-gold);
font-size: 9px;
letter-spacing: .2em;
text-transform: uppercase;
}
#cozy-calendar-2026 .cc-modal__task {
color: #c6b7aa;
font-size: 13px;
line-height: 1.65;
}
#cozy-calendar-2026 .cc-modal__image img {
display: block;
width: 85px;
height: 85px;
object-fit: contain;
}
/* =========================================================
АДАПТАЦИЯ
========================================================= */
/* планшет */
@media (max-width: 900px) {
#cozy-calendar-2026 .cc-grid {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
}
/* мобильные */
@media (max-width: 600px) {
#cozy-calendar-2026 {
margin: 15px auto;
}
#cozy-calendar-2026 .cc-shell {
padding: 12px;
}
#cozy-calendar-2026 .cc-header {
padding: 8px 4px 16px;
}
#cozy-calendar-2026 .cc-header__title {
gap: 8px;
}
#cozy-calendar-2026 .cc-header__ornament {
font-size: 14px;
}
#cozy-calendar-2026 .cc-title {
font-size: 25px;
}
#cozy-calendar-2026 .cc-subtitle {
font-size: 9px;
letter-spacing: .18em;
}
#cozy-calendar-2026 .cc-header__description {
font-size: 12px;
}
#cozy-calendar-2026 .cc-rules {
padding: 12px;
}
#cozy-calendar-2026 .cc-rules__grid {
grid-template-columns: 1fr;
gap: 7px;
}
#cozy-calendar-2026 .cc-theme {
padding: 11px;
}
#cozy-calendar-2026 .cc-theme__head {
gap: 10px;
}
#cozy-calendar-2026 .cc-theme__icon {
flex-basis: 40px;
width: 40px;
height: 40px;
font-size: 21px;
}
#cozy-calendar-2026 .cc-theme h2 {
font-size: 18px;
}
#cozy-calendar-2026 .cc-theme p {
font-size: 10px;
}
#cozy-calendar-2026 .cc-grid {
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 6px;
}
#cozy-calendar-2026 .cc-day {
padding: 3px;
}
#cozy-calendar-2026 .cc-day__number {
left: 5px;
top: 4px;
font-family: "Gesmont", Georgia, serif;
font-size: clamp(25px, 9vw, 37px);
}
#cozy-calendar-2026 .cc-day__icon {
right: 5px;
bottom: 6px;
font-size: 15px;
}
#cozy-calendar-2026 .cc-day__label {
display: none;
}
#cozy-calendar-2026 .cc-modal {
width: 320px;
padding: 17px;
}}
/* совсем узкий экран */
@media (max-width: 370px) {
#cozy-calendar-2026 .cc-grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}}
/* =========================================================
ШАБЛОН ПОДАРКА
========================================================= */
#cozy-calendar-2026 .cc-gift-template {
position: relative;
margin-top: 22px;
padding: 18px 16px 16px;
text-align: center;
border-top: 1px solid rgba(227,205,168,.16);
background:
linear-gradient(
135deg,
rgba(255,255,255,.025),
rgba(0,0,0,.10)
);
}
/* заголовок */
#cozy-calendar-2026 .cc-gift-template__title {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: 5px;
color: var(--cc-gold-light);
font-family: Georgia, serif;
font-size: 12px;
letter-spacing: .2em;
text-transform: uppercase;
}
#cozy-calendar-2026 .cc-gift-template__title span {
color: var(--cc-gold);
font-size: 10px;
opacity: .8;
}
/* пояснение */
#cozy-calendar-2026 .cc-gift-template__text {
margin-bottom: 12px;
color: #9f9086;
font-size: 10px;
line-height: 1.5;
}
/* =========================================================
ШАБЛОН
========================================================= */
#cozy-calendar-2026 .cc-gift-template{
margin:14px 0 0;
padding:12px 8px 2px;
border-top:1px solid rgba(227,205,168,.14);
}
#cozy-calendar-2026 .cc-task-code{
max-width:520px;
margin:0 auto;
padding:9px 14px;
text-align:left;
white-space:pre-line;
cursor:pointer;
user-select:all;
color:#bcaea3;
font-family:Georgia,serif;
font-size:11px;
line-height:1.55;
background:rgba(199,167,122,.035);
border:1px solid rgba(199,167,122,.18);
transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
#cozy-calendar-2026 .cc-task-code:hover{
background:rgba(199,167,122,.07);
border-color:rgba(227,205,168,.35);
}
#cozy-calendar-2026 .cc-task-code.copied{
background:rgba(199,167,122,.13);
border-color:rgba(227,205,168,.55);
box-shadow:0 0 14px rgba(199,167,122,.12);
}
#cozy-calendar-2026 .cc-task-hint{
margin-top:4px;
text-align:center;
color:#766960;
font-size:8px;
letter-spacing:.12em;
text-transform:uppercase;
}
@media(max-width:600px){
#cozy-calendar-2026 .cc-gift-template{
margin-top:11px;
padding:10px 3px 1px;
}
#cozy-calendar-2026 .cc-task-code{
padding:8px 11px;
font-size:10px;
}
}
/* ======ссылки======*/
#cozy-calendar-2026 .cc-modal__task a {
color: #c9aa7d;
text-decoration: none;
border-bottom: 1px dotted rgba(201,170,125,.6);
transition: .2s;
}
#cozy-calendar-2026 .cc-modal__task a:hover {
color: #ead3ae;
border-bottom-color: #ead3ae;
}
</style>
<script>
(function () {
"use strict";
/* ==================================НАСТРОЙКИ================================ */
const CALENDAR_YEAR = 2026;
/*15 сентября 2026 = первый день календаря.
Всего 40 дней.*/
const START_MONTH = 8; // сентябрь
const START_DAY = 15; // начинаем с 15 сентября
const DAYS = 40;
/* =================================ДАННЫЕ ДНЕЙ================================ */
const CONTENTS = [
/* 15 */
{
title: "День первой страницы",
icon: "🔖",
image: "https://i.imgur.com/nj2atN8.png",
gift: "Подарок · Книжная Закладка",
task: "Выберите книгу, которую давно хотели прочитать, и покажите её обложку. ✦ этот подарок вы можете подарить 2 раза за выполненное задание ✦"
},
/* 16 */
{
title: "Любимая цитата",
icon: "🔖",
image: "https://i.imgur.com/aP9d7Ei.png",
gift: "Подарок · Хранитель Тайн",
task: "Поделитесь одной цитатой из книги, которая вам особенно нравится."
},
/* 17 */
{
title: "Библиотека",
icon: "🔖",
image: "https://i.imgur.com/DBpZfcG.png",
gift: "Подарок · Осенние страницы",
task: "Какое классическое произведение является любимым у персонажа и почему?"
},
/* 18 */
{
title: "Свет Вдохновения",
icon: "🔖",
image: "https://i.imgur.com/ImFK5bL.png",
gift: "Подарок · Язык Цветов",
task: "Принесите эстетику на Бостон (это может быть коллаж или обработанная картинка) для Праздничных Пазлов. ✦ этот подарок вы можете подарить 2 раза за выполненное задание ✦"
},
/* 19 */
{
title: "Обнимашки с котами",
icon: "✨",
image: "https://i.imgur.com/MVkYTUF.png",
gift: "Подарок · Котячий Вечер",
task: "Напишите поздравление для Бостона в тему <a href='https://bostoncrazzy.rusff.me/viewtopic.php?id=31' target='_blank'>Посвящений</a> <3 ✦ этот подарок вы можете подарить 3 раза за выполненное задание ✦"
},
/* 20 */
{
title: "Полка мечты",
icon: "🔖",
image: "https://i.imgur.com/u66l4Ll.png",
gift: "Подарок · Полезное и Приятное",
task: "Составьте мини-список из трёх книг, которые хотели бы добавить на свою полку (в книжном переплёте)."
},
/* 21 */
{
title: "Из Италии с любовью",
icon: "🔖",
image: "https://i.imgur.com/aq1uhU6.png",
gift: "Подарок · Набор Марок",
task: "Покажите место, которое ваш персонаж воспринимает как уютное и спокойное? Расскажите почему."
},
/* 22 */
{
title: "Сказки Тёмного Леса",
icon: "🔖",
image: "https://i.imgur.com/9jJs6LF.png",
gift: "Подарок · Закладка с Папоротником",
task: "Расскажите, какой напиток вы выбираете под чтение, или может все зависит от жанра и настроения? Что это чаще всего за напиток?"
},
/* 23 */
{
title: "Первый росток",
icon: "🪴",
image: "https://i.imgur.com/a5LBcbG.png",
gift: "Подарок · Росток в Колбочке",
task: "Покажите растение или цветок, с которым у вас ассоциируется ваш персонаж, не забудьте поделиться названием. ✦ этот подарок вы можете подарить 2 раза за выполненное задание ✦"
},
/* 24 */
{
title: "Зелёный уголок",
icon: "🪴",
image: "https://i.imgur.com/nHMJn7P.png",
gift: "Подарок · Набор Садовода",
task: "Поставьте себе цель по постам в Ставках на неделю/месяц/до конца осени/до конца года."
},
/* 25 */
{
title: "Домашнее деревце",
icon: "🪴",
image: "https://i.imgur.com/e5O47DC.png",
gift: "Подарок · Бонсай",
task: "Придумайте идеальное место для домашнего растения у вашего персонажа дома, что это было бы за растение? Дайте ему имя и расскажите, выжило бы оно вообще у персонажа?) ✦ этот подарок вы можете подарить 2 раза за выполненное задание ✦"
},
/* 26 */
{
title: "Вечерний сад",
icon: "🪴",
image: "https://i.imgur.com/7htgMQb.png",
gift: "Подарок · Ночные Орхидеи",
task: "Выберите любое растение, которое находится дома/на работе/по пути персонажа, и расскажите одну сцену из его жизни от лица этого растения. Можно буквально 3–5 предложений."
},
/* 27 */
{
title: "Тот самый Аромат",
icon: "🪴",
image: "https://i.imgur.com/D5RFOse.png",
gift: "Подарок · Аромат из Сада",
task: "Подберите ароматы, которые ассоциируются с разными переживаниями жизни персонажа: серьёзность, влюбленность, отчаянье, интерес. ✦ этот подарок вы можете подарить 2 раза за выполненное задание ✦"
},
/* 28 */
{
title: "Ошибка выжившего",
icon: "🪴",
image: "https://i.imgur.com/NqphRfl.png",
gift: "Подарок · Живучие Суккуленты",
task: "Отправьте в Подарках один из представленных там букетов персонажу, с которым вы ещё не играли (бесплатно) ✦ этот подарок вы можете подарить 2 раза за выполненное задание ✦"
},
/* 29 */
{
title: "Дикий уголок",
icon: "🪴",
image: "https://i.imgur.com/AgHZhyq.png",
gift: "Подарок · Домашний Плющ",
task: "Субботник. Ваш персонаж против своей воли оказался на коллективном субботнике. Составьте команду мечты из персонажей которые есть на форуме, чтобы мероприятие превратилось в катастрофу? Что каждый из них будет делать?"
},
/* 30 */
{
title: "Садоводство",
icon: "🪴",
image: "https://i.imgur.com/jWdQA1p.png",
gift: "Подарок · ",
task: "Опишите идеальный маленький сад всего тремя словами."
},
/* 31 */
{
title: "Призыв Демонов Кофе",
icon: "☕",
image: "https://i.imgur.com/ClIOh9h.png",
gift: "Подарок · Ритуал на Кофеине",
task: "Подберите для 5-ти ваших соигроков кофейный напиток? ✦ этот подарок вы можете подарить 3 раза за выполненное задание ✦"
},
/* 32 */
{
title: "Кофейный аромат",
icon: "☕",
image: "https://i.imgur.com/q7t4iMW.png",
gift: "Подарок · Уличный кофе",
task: "Выпейте с кем-то в Бухалочке или получите предложение выпить или отпишитесь в теме 3 раза."
},
/* 33 */
{
title: "Утренний ритуал",
icon: "☕",
image: "https://i.imgur.com/NqTP1zL.png",
gift: "Подарок · Доброе утро",
task: "Опишите идеальный утренний ритуал (помимо кофе) для персонажа."
},
/* 34 */
{
title: "Сладкая чашка",
icon: "☕",
image: "https://i.imgur.com/nf9cSvY.png",
gift: "Подарок · Капучино в Вафле",
task: "Выберите десерт, который идеально подошёл бы к кофе."
},
/* 35 */
{
title: "",
icon: "☕",
image: "картинка",
gift: "Подарок · Ароматный американо",
task: "Выберите музыку для прогулки."
},
/* 36 */
{
title: "Согреем руки",
icon: "☕",
image: "картинка",
gift: "Подарок · Горячая чашка",
task: "Подберите идеальную чашку для своего персонажа и чашки для ещё 3 персонажей Бостона."
},
/* 37 */
{
title: "Ночная кофейня",
icon: "☕",
image: "картинка",
gift: "Подарок · Ночной кофе",
task: ""
},
/* 38 */
{
title: "Последний глоток",
icon: "☕",
image: "картинка",
gift: "Подарок · ",
task: "Придумайте название для Кофейни, которую мог бы открыть персонаж?"
},
/* 39 */
{
title: "Первый огонёк",
icon: "🕯️",
image: "картинка",
gift: "Подарок · Свеча",
task: "Выберите аромат свечи, которую обязательно приобретет персонаж, чтобы зажигать вечерами."
},
/* 40 */
{
title: "Плед",
icon: "🕯️",
image: "картинка",
gift: "Подарок · Тёплый плед",
task: ""
},
/* 27 */
{
title: "Окно",
icon: "🕯️",
image: "картинка",
gift: "Подарок · Вид из окна",
task: ""
},
/* 28 */
{
title: "Лампа",
icon: "🕯️",
image: "картинка",
gift: "Подарок · Тёплый свет",
task: ""
},
/* 29 */
{
title: "Шкатулка",
icon: "🕯️",
image: "картинка",
gift: "Подарок · Шкатулка",
task: ""
},
/* 30 */
{
title: "",
icon: "🕯️",
image: "картинка",
gift: "Подарок · ",
task: ""
},
/* 31 */
{
title: "Музыка",
icon: "🕯️",
image: "картинка",
gift: "Подарок · Музыкальный вечер",
task: ""
},
/* 32 */
{
title: "Уютный",
icon: "🕯️",
image: "картинка",
gift: "Подарок · Уютный дом",
task: "Назовите три вещи, без которых для вас невозможен уютный вечер, а для вашего персонажа?"
},
/* 33 */
{
title: "",
icon: "🍰",
image: "картинка",
gift: "Подарок · Рецепт",
task: "Взгляните на наш Адвент-Календарь, найдите к представленным дням пасхалки на активности, которые проходили в этом году в Бостоне. Напишите их в формате: День - Пасхалка на... "
},
/* 34 */
{
title: "Выпечка",
icon: "🍰",
image: "картинка",
gift: "Подарок · Домашняя выпечка",
task: ""
},
/* 35 */
{
title: "Специи",
icon: "🍰",
image: "картинка",
gift: "Подарок · Специи",
task: ""
},
/* 36 */
{
title: "",
icon: "🍰",
image: "картинка",
gift: "Подарок · ",
task: ""
},
/* 37 */
{
title: "Сладкое",
icon: "🍰",
image: "картинка",
gift: "Подарок · Десерт",
task: ""
},
/* 38 */
{
title: "Секретный ингредиент",
icon: "🍰",
image: "картинка",
gift: "Подарок · Секрет шефа",
task: ""
},
/* 39 */
{
title: "Семейный рецепт",
icon: "🍰",
image: "картинка",
gift: "Подарок · Старый рецепт",
task: "Выберите блюдо, которое персонаж считает своим фирменным."
},
/* 40 */
{
title: "",
icon: "🍰",
image: "картинка",
gift: "Подарок · Большой пир",
task: "Соберите идеальное меню из 3х блюд и 3х напитков, если бы персонажу пришлось питаться только этим до конца своей жизни."
}
];
/* ============================ЭЛЕМЕНТЫ============================== */
const root =
document.getElementById("cozy-calendar-2026");
if (!root) return;
const modalBg =
root.querySelector("#cc-modal-bg");
const modal =
root.querySelector("#cc-modal");
const modalDay =
root.querySelector("#cc-modal-day");
const modalTitle =
root.querySelector("#cc-modal-title");
const modalImage =
root.querySelector("#cc-modal-image");
const modalGift =
root.querySelector("#cc-modal-gift");
const modalTask =
root.querySelector("#cc-modal-task");
const closeButton =
root.querySelector(".cc-modal__close");
/* =====================================================
МОСКОВСКОЕ ВРЕМЯ
===================================================== */
function getMoscowDate() {
const now = new Date();
const parts =
new Intl.DateTimeFormat(
"en-US",
{
timeZone: "Europe/Moscow",
year: "numeric",
month: "2-digit",
day: "2-digit"
}
).formatToParts(now);
const result = {};
parts.forEach(part => {
if (part.type !== "literal") {
result[part.type] =
Number(part.value);
}
});
return new Date(
result.year,
result.month - 1,
result.day
);
}
/* ==========================ДАТА КОНКРЕТНОГО ДНЯ====================== */
function getDayDate(dayNumber) {
return new Date(
CALENDAR_YEAR,
START_MONTH,
START_DAY + dayNumber - 1
);
}
/* ===========================СРАВНЕНИЕ ДАТ============================ */
function sameDate(a, b) {
return (
a.getFullYear() === b.getFullYear() &&
a.getMonth() === b.getMonth() &&
a.getDate() === b.getDate()
);
}
/* ============================СОЗДАНИЕ ЯЧЕЕК========================= */
const grids =
root.querySelectorAll(".cc-grid");
grids.forEach(grid => {
const start =
Number(grid.dataset.start);
const end =
Number(grid.dataset.end);
for (
let day = start;
day <= end;
day++
) {
const button =
document.createElement("button");
button.type = "button";
button.className = "cc-day";
button.dataset.day = day;
const number =
document.createElement("span");
number.className =
"cc-day__number";
number.textContent =
String(day).padStart(2, "0");
const label =
document.createElement("span");
label.className =
"cc-day__label";
label.textContent =
"открыть";
const icon =
document.createElement("span");
icon.className =
"cc-day__icon";
icon.textContent =
CONTENTS[day - 1]?.icon || "✦";
const lock =
document.createElement("span");
lock.className =
"cc-day__lock";
lock.textContent = "🔒";
button.appendChild(number);
button.appendChild(label);
button.appendChild(icon);
button.appendChild(lock);
grid.appendChild(button);
}
});
/* ===========================СОСТОЯНИЕ ДНЕЙ========================== */
function updateDays() {
const today =
getMoscowDate();
root.querySelectorAll(".cc-day")
.forEach(button => {
const day =
Number(button.dataset.day);
const date =
getDayDate(day);
button.classList.remove(
"is-locked",
"is-open",
"is-today"
);
const lock =
button.querySelector(".cc-day__lock");
if (today < date) {
button.classList.add(
"is-locked"
);
lock.style.display =
"block";
} else {
button.classList.add(
"is-open"
);
lock.style.display =
"none";
}
if (sameDate(today, date)) {
button.classList.add(
"is-today"
);
}
});
}
updateDays();
/* =====================================================
ПОЗИЦИОНИРОВАНИЕ МОДАЛКИ
окно привязывается именно к нажатой ячейке.
===================================================== */
function positionModal(button) {
/*модалка видимая, но невидимая визуально*/
modal.style.left = "0px";
modal.style.top = "0px";
modal.classList.remove("is-active");
const rect =
button.getBoundingClientRect();
const viewportWidth =
window.innerWidth;
const viewportHeight =
window.innerHeight;
const gap = 10;
const margin = 10;
const modalWidth =
modal.offsetWidth;
const modalHeight =
modal.offsetHeight;
let left;
let top;
/* ---------------------------------------------
1. Пытаемся поставить справа
--------------------------------------------- */
if (
rect.right +
gap +
modalWidth +
margin
<= viewportWidth
) {
left =
rect.right + gap;
}
/* ---------------------------------------------
2. Справа не помещается — слева
--------------------------------------------- */
else if (
rect.left -
gap -
modalWidth
>= margin
) {
left =
rect.left -
modalWidth -
gap;
}
/* ---------------------------------------------
3. На узком экране:
под ячейкой
--------------------------------------------- */
else {
left =
Math.max(
margin,
Math.min(
rect.left,
viewportWidth -
modalWidth -
margin
)
);
top =
rect.bottom + gap;
/*
Если снизу не помещается —
ставим над ячейкой.
*/
if (
top +
modalHeight +
margin
> viewportHeight
) {
top =
rect.top -
modalHeight -
gap;
}
}
/* ---------------------------------------------
Вертикальное выравнивание
--------------------------------------------- */
if (typeof top === "undefined") {
top = rect.top;
}
if (
top +
modalHeight +
margin
> viewportHeight
) {
top =
viewportHeight -
modalHeight -
margin;
}
if (top < margin) {
top = margin;
}
/* ---------------------------------------------
Горизонтальная страховка
--------------------------------------------- */
if (
left +
modalWidth +
margin
> viewportWidth
) {
left =
viewportWidth -
modalWidth -
margin;
}
if (left < margin) {
left = margin;
}
modal.style.left =
Math.round(left) + "px";
modal.style.top =
Math.round(top) + "px";
}
/* =====================================================
ОТКРЫТИЕ
===================================================== */
function openModal(button) {
const day =
Number(button.dataset.day);
const content =
CONTENTS[day - 1];
if (!content) return;
/*
Если день ещё закрыт —
ничего не делаем.
*/
if (
button.classList.contains(
"is-locked"
)
) {
return;
}
modalDay.textContent =
"ДЕНЬ " +
String(day).padStart(2, "0");
modalTitle.textContent =
content.title;
if (content.image) {
modalImage.innerHTML =
'<img src="' +
content.image +
'" alt="">';
} else {
modalImage.textContent =
content.icon || "✦";
}
modalGift.textContent =
content.gift || "";
modalTask.innerHTML = content.task;
modalBg.classList.add(
"is-visible"
);
/*
Небольшая задержка нужна,
чтобы браузер успел посчитать размеры
модального окна.
*/
requestAnimationFrame(() => {
positionModal(button);
requestAnimationFrame(() => {
modal.classList.add(
"is-active"
);
});
});
}
/* =====================================================
ЗАКРЫТИЕ
===================================================== */
function closeModal() {
modal.classList.remove(
"is-active"
);
setTimeout(() => {
modalBg.classList.remove(
"is-visible"
);
}, 160);
}
/* =====================================================
КЛИКИ ПО ДНЯМ
===================================================== */
root.querySelectorAll(".cc-day")
.forEach(button => {
button.addEventListener(
"click",
function () {
openModal(this);
}
);
});
/* =====================================================
ЗАКРЫТИЕ
===================================================== */
closeButton.addEventListener(
"click",
closeModal
);
/*
Клик по затемнению,
но не по самому окну.
*/
modalBg.addEventListener(
"click",
function (event) {
if (
event.target === modalBg
) {
closeModal();
}
}
);
/*
ESC
*/
document.addEventListener(
"keydown",
function (event) {
if (
event.key === "Escape" &&
modalBg.classList.contains(
"is-visible"
)
) {
closeModal();
}
}
);
/* =====================================================
ЕСЛИ ОКНО ОТКРЫТО И ПРОИЗОШЁЛ RESIZE
===================================================== */
let activeButton = null;
root.querySelectorAll(".cc-day")
.forEach(button => {
button.addEventListener(
"click",
function () {
activeButton = this;
}
);
});
window.addEventListener(
"resize",
function () {
if (
activeButton &&
modalBg.classList.contains(
"is-visible"
)
) {
positionModal(
activeButton
);
}
}
);
/* =====================================================
ПОЛУНОЧНЫЙ RESET
Дополнительно обновляем состояние,
чтобы после 00:00 MSK новая дверь
автоматически стала доступной.
===================================================== */
setInterval(
updateDays,
60 * 1000
);
const giftTemplate=root.querySelector(".cc-task-code");
if(giftTemplate){
function copyGiftTemplate(){
const text=giftTemplate.innerText.trim();
navigator.clipboard.writeText(text).then(()=>{
giftTemplate.classList.add("copied");
setTimeout(()=>giftTemplate.classList.remove("copied"),700);
}).catch(()=>{
const textarea=document.createElement("textarea");
textarea.value=text;
textarea.style.position="fixed";
textarea.style.opacity="0";
document.body.appendChild(textarea);
textarea.select();
document.execCommand("copy");
document.body.removeChild(textarea);
giftTemplate.classList.add("copied");
setTimeout(()=>giftTemplate.classList.remove("copied"),700);
});
}
giftTemplate.addEventListener("click",copyGiftTemplate);
giftTemplate.addEventListener("keydown",function(event){
if(event.key==="Enter"||event.key===" "){
event.preventDefault();
copyGiftTemplate();
}
});
}
})();
</script>[/html]
[hideprofile]
