[hideprofile][html]
<style>
:root {
--panel-bg: url("https://i.pinimg.com/1200x/7b/97/9c/7b979cc75285cfd1affe45d28b913203.jpg");
--text-main: #351e18;
--intro-bg: rgba(255, 247, 240, 0.92);
--intro-border: rgba(90, 60, 45, 0.25);
}
/* Карточка */
.haupt-werb-card {
width: 720px;
margin: 30px auto;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 14px 20px rgba(0,0,0,.35);
background:
radial-gradient(circle at top left, rgba(255,255,255,.02) 0, transparent 40%),
var(--panel-bg) center/cover no-repeat;
position: relative;
box-sizing: border-box;
text-align: center;
}
.haupt-werb-card::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(
circle at top center,
rgba(255,255,255,0.3) 0,
rgba(0,0,0,0.3) 95%
);
z-index: 0;
}
.haupt-werb-card > * { position: relative; z-index: 1; }
.haupt-werb-intro::-webkit-scrollbar {
width: 1px !important;
}
.haupt-werb-intro::-webkit-scrollbar-track {
background: transparent !important;
}
.haupt-werb-intro::-webkit-scrollbar-thumb {
background: transparent !important;
}
/* Заголовок */
.haupt-werb-title {
font-family: "Passion One", sans-serif;
font-size: 62px !important;
text-align: center;
color: var(--white2);
margin: 20px 0 22px;
text-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
/* Intro */
.haupt-werb-intro {
position: relative;
overflow: hidden;
width: 464px;
border-radius: 14px;
padding: 16px 30px 18px;
margin: 22px auto;
line-height: 1.6;
font-size: 14px;
color: #000;
background: rgba(255,253,247,0.7);
-webkit-overflow-scrolling: touch; /* важный момент для iPhone */
max-height: 100vh; /* или другая нужная высота */
}
.haupt-werb-intro .intro-title {
text-transform: uppercase;
font-weight: 700;
color: var(--text-main);
margin-bottom: 6px;
letter-spacing: 1px;
font-size: 13px;
}
.haupt-werb-intro p {
margin: 0;
line-height: 1.5;
font-size: 13px;
}
/* КАРТА-КАЛЕНДАРЬ */
.image-wrap {
position: relative;
width: 520px;
height: 500px;
margin: 0 auto 20px;
background: rgba(255,253,247,0.5);
border-radius: 14px;
overflow: hidden;
}
.image-wrap img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* ДНИ */
.open-day {
position: absolute;
height: 65px;
width: 65px;
background: transparent;
border-radius: 6px;
/*box-shadow: 0 2px 8px rgba(0,0,0,.25);*/
font-size: 0px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: .25s;
backdrop-filter: blur(0px);
overflow: visible;
z-index: 2; /* поверх картинки */
}
.open-day::before {
content: "";
position: absolute;
inset: -3px; /* ← насколько сияние выходит за рамки квадрата */
border-radius: 12px;
/*background: rgba(255,255,255,0); по умолчанию */
filter: blur(0px);
opacity: 0;
transition: .4s ease;
z-index: -1; /* подсветка под текстом дня */
}
/* НАВЕДЕНИЕ → мягкое сияние */
.open-day:hover::before {
background: rgba(255,255,255,0.2);
filter: blur(6px);
opacity: 1;
}
/* POPUP-КАРТА */
.day-popup .popup-card {
width: 420px;
min-height: 300px;
background: rgba(255,253,247,0.96);
border-radius: 20px;
padding: 24px 28px 20px;
box-shadow: 0 12px 25px rgba(0,0,0,.35);
color: var(--text-main);
max-height: 80vh;
overflow-y: auto;
border: 1px solid rgba(90,60,45,0.25);
animation: popupIn .35s ease;
display: flex;
flex-direction: column;
justify-content: space-between; /* текст сверху, кнопка снизу */
align-items: center; /* центрировать по горизонтали */
}
.day-popup {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
display: none;
justify-content: center;
align-items: center;
z-index: 50;}
/* Текст строго по центру */
.popup-text {
text-align: center;
width: 100%;
margin: auto 0; /* даёт вертикальное выравнивание */
}
/* Кнопка — фиксировано снизу и по центру */
.popup-close {
margin-top: 20px;
margin-bottom: 5px;
background: #c49a75;
padding: 8px 20px;
border-radius: 10px;
color: #fff;
cursor: pointer;
transition: .2s;
font-size: 13px;
align-self: center; /* строго по центру снизу */
}
.popup-close:hover { background:#a37854; }
@keyframes popupIn {
from { opacity: 0; transform: scale(0.85);}
to { opacity: 1; transform: scale(1);}
}
</style>
<div class="haupt-werb-card">
<h1 class="haupt-werb-title">RE:Pokemon</h1>
<div class="haupt-werb-intro" style="height: 141px; overflow: auto;">
<div class="intro-title">❆ Добро пожаловать в наш декабрьский Адвент-ивент! ❆</div>
<p>
Весь месяц мы вместе открываем события календаря — каждый день приятная награда.
Заглядывай ежедневно, чтобы добраться до главных призов!
</p>
<p>
31 декабря откроется большой праздничный магазин наград — именно там ты сможешь потратить очки ивента 💎<br>
Призы, ивентовые сувениры и главный розыгрыш финала — гача-лотерея покемонов!<br><br>
Готовься:<br>
— писать весёлые сообщения во флуде,<br>
— выполнять задания,<br>
— искать спрятанные секреты,<br>
— собирать очки, чтобы побороться за главные призы!<br><br>
Включайся в зимнее приключение, заряжайся настроением и проводи этот декабрь вместе с нами <img src="https://upforme.ru/uploads/001c/25/14/2/320199.gif"></p>
</div>
<div class="image-wrap">
<a href="https://repokemon.mybb.ru/">
<img src="https://forumstatic.ru/files/001c/25/14/53533.png" alt="">
</a>
<!-- ряд 1 -->
<div class="open-day" style="top:31px; left:42px;">1</div>
<div class="open-day" style="top:31px; left:135px;">2</div>
<div class="open-day" style="top:31px; left:228px;">3</div>
<div class="open-day" style="top:31px; left:320px;">4</div>
<div class="open-day" style="top:31px; left:412px;">5</div>
<!-- ряд 2 -->
<div class="open-day" style="top:106px; left:44px;">6</div>
<div class="open-day" style="top:106px; left:135px;">7</div>
<div class="open-day" style="top:106px; left:228px;">8</div>
<div class="open-day" style="top:106px; left:320px;">9</div>
<div class="open-day" style="top:106px; left:412px;">10</div>
<!-- ряд 3 -->
<div class="open-day" style="top:181px; left:42px;">11</div>
<div class="open-day" style="top:181px; left:135px;">12</div>
<div class="open-day" style="top:181px; left:228px;">13</div>
<div class="open-day" style="top:181px; left:320px;">14</div>
<div class="open-day" style="top:181px; left:412px;">15</div>
<!-- ряд 4 -->
<div class="open-day" style="top:256px; left:42px;">16</div>
<div class="open-day" style="top:256px; left:135px;">17</div>
<div class="open-day" style="top:256px; left:228px;">18</div>
<div class="open-day" style="top:256px; left:320px;">19</div>
<div class="open-day" style="top:256px; left:412px;">20</div>
<!-- ряд 5 -->
<div class="open-day" style="top:331px; left:42px;">21</div>
<div class="open-day" style="top:331px; left:135px;">22</div>
<div class="open-day" style="top:331px; left:228px;">23</div>
<div class="open-day" style="top:331px; left:320px;">24</div>
<div class="open-day" style="top:331px; left:412px;">25</div>
<!-- ряд 6 -->
<div class="open-day" style="top:408px; left:42px;">26</div>
<div class="open-day" style="top:408px; left:135px;">27</div>
<div class="open-day" style="top:408px; left:228px;">28</div>
<div class="open-day" style="top:408px; left:320px;">29</div>
<div class="open-day" style="top:408px; left:412px;">30</div>
</div>
<!-- POPUP-КАРТА ДНЯ -->
<div class="day-popup" id="dayPopup">
<div class="popup-card">
<div class="popup-text" id="popupText">Текст для дня</div>
<div class="popup-close" onclick="hidePopup()">Закрыть</div>
</div>
</div>
</div>
<script>
// Текст для каждого дня (можешь прописать свои)
const dayText = {
1: "День 1: Получи на счёт 25 очков ивента и начинай их копить! 💎",
2: "День 2: Получи лимитированный ивентовый фон для профиля! ❄",
3: "День 3: Получи рандомный предмет из магазина.<br>Время кидать кубик (1 кубик с 124 гранями)!<br>Надеюсь, ты скрестил пальцы.",
4: "День 4: Получи на счёт 25 очков ивента и продолжай их копить! 💎",
5: "День 5: Небольшое задание, чтобы согреться.<br>Найди 10 снежинок на форуме и получи ивентовую снежинку + 100 монет в профиль.<br>Присылай ссылки на темы, где нашлись снежинки или скриншоты в <b>скрытом коде</b>!",
6: "День 6: Получи 45 очков за сложенный пазл!<br><a href='https://repokemon.mybb.ru/pages/puzzle'>Нажми сюда</a>, чтобы найти свой пазл.<br><br>Уточнение: пазл считается сложенным, когда выскакивает уведомление!",
7: "День 7: Получи купон на кастомное оформление любой темы или заказ рекламы для себя или друга. <img src='https://archives.bulbagarden.net/media/upload/3/34/Bag_MysticTicket_Sprite.png'>",
8: "День 8: Напиши сообщение во флуде с любой маской и получи покебол на выбор 🎁",
9: "День 9: Получи на счёт 25 очков ивента, а также РЕРОЛ для финальной лотереи.",
10:"День 10: Получи на счёт 25 очков ивента.<br>Вместо этого получи 30, если писал в <a href='https://repokemon.mybb.ru/viewtopic.php?id=255'>Покевайбс</a> в декабре",
11:"День 11: Получи на счёт 25 очков ивента.<br>Вместо этого получи 50, если прошёл<br><a href='https://repokemon.mybb.ru/pages/test'>специальный тест</a>, какого типа ты печенька.",
12:"День 12: Получи 5 свободных уровней для твоих покемонов!",
13:"День 13: Получи купон на сладкое начало для себя или своего друга! Угости дикого покемона (соответствующего по уровню и форме, а также доступного к поимке) сладостями и можешь пропустить бой с ним — сладкоежка с радостью присоединится к твоей команде.",
14:"День 14: Получи на счёт 25 очков ивента, а также купон на скидку 50% в ивентовом магазине (будет открыт позже), если это подарок 🎁 <br>(не распространяется на подарки своим твинкам).",
15:"День 15: Получи 25 очков ивента просто так! <br>Вместо этого получи 50, если оставлял в декабре<br>заявку на квест.<br>(получи дополнительно в любой момент 10 дополнительных очков ивента, если в квесте упоминается уют огня от камина, открытого огня или, например, свечи)",
16:"День 16: Получи на счёт 25 очков ивента. <br>Вместо этого получи 50, если поделишься новогодним настроением! Расскажи сегодня свои планы на новый год или о каком праздновании нового года ты мечтаешь. Может, у тебя есть классная кружка с новогодним принтом или плюшевый олень? Поделись фото, если хочешь <img src='https://upforme.ru/uploads/001c/25/14/2/429826.gif'>",
17:"День 17: Получи на счёт 25 очков ивента.<br>Вместо этого получи 50, если упоминал в постах в декабре стадионы или действующих гим лидеров.",
18:"День 18: Получи 5 свободных уровней<br>ИЛИ<br>Купон на поход к парикмахеру<br>(позволяет временно сменить окрас покемона, включая шайни цвета; эффект пропадает, если покемон искупался/был атакован водной атакой)",
19:"День 19: Получи на счёт 100 очков ивента, а также купоны на кастомную иконку и кастомный фон в профиль себе или другу.",
20:"День 20: Получи на счёт 25 очков ивента.<br>Вместо этого получи 50, если оставлял заявку на нужного или хочу видеть в декабре.",
21:"День 21: Получи радужное перо (игровой предмет), которое неведомым образом при касании снимает один негативный эффект или исцеляет лёгкую травму. После применения теряет свойства, но не цвет — можно оставить себе как сувенир или продать коллекционеру за 100 монет. Излучает слабый свет.",
22:"День 22: Получи на счёт 50 очков ивента и случайный камень эволюции<br>ИЛИ<br>Выбери любой камень эволюции",
23:"День 23: Получи купон на создание кастомной локации для себя или своего друга. Например, дом персонажа, целый район или мистическое место, где можно встретить особых покемонов (могут быть наложены ограничения для посещения или время существования локации).",
24:"День 24: Получи на счёт 30 очков ивента, а также РЕРОЛ для финальной лотереи.",
25:"День 25: Получи 8 свободных уровней!<br>ИЛИ<br>Получи 5 свободных уровней и подари 5 другу! 🎁",
26:"День 26: Получи на счёт 100 очков ивента и 100 монет",
27:"День 27: Получи на счёт 45 очков ивента. Ты не получишь за следующее задание больше очков, но можешь выполнить его просто так. Отправь кому-нибудь подписанное или анонимное письмо, которое делибёрд вручит лично или открыто 31-го декабря.",
28:"День 28: Будет доступен 28-го декабря!",
29:"День 29: Будет доступен 29-го декабря!",
30:"День 30: Будет доступен 30-го декабря!"
};
function showPopup(day) {
const text = dayText[day] || "Содержимое для этого дня ещё не добавлено.";
document.getElementById("popupText").innerHTML = text;
document.getElementById("dayPopup").style.display = "flex";
}
function hidePopup() {
document.getElementById("dayPopup").style.display = "none";
}
// Вешаем клики на все .open-day
document.querySelectorAll('.open-day').forEach(el => {
el.addEventListener('click', () => {
const day = parseInt(el.innerText.trim(), 10);
showPopup(day);
});
});
// Закрытие по клику по тёмному фону
document.getElementById('dayPopup').addEventListener('click', function(e){
if (e.target === this) hidePopup();
});
</script>
[/html]
