Ивент-Календарь
‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑ ‑
~2 недели заданий
[html]<style>
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
max-width: 1000px;
margin: 0 auto;
cursor: pointer;
font-family: 'Akrobat', sans-serif;
}
.cell {
position: relative;
background: #2c3842;
color: #b2c9df;
border-radius: 6px;
height: 120px;
padding: 7px;
overflow: hidden;
display: flex;
text-align: center;
transition: transform 0.2s ease, box-shadow 0.2s ease;
font-size: 1rem;
cursor: pointer;
box-shadow: inset 0px 0px 8px -2px #7d766c54;
flex-direction: column;
justify-content: center;}
.cell:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.cell::before {
content: attr(data-day);
position: absolute;
top: 8px;
left: 8px;
font-size: 1.3rem;
color: #99cdff;;
opacity: 0.4;
}
.locked {
background: #bfc7be;;
color: transparent;
pointer-events: none;
}
.locked::before {
opacity: 0.1;
}
.blurred {
filter: blur(3px);
pointer-events: none;
}
.actcell {box-shadow: inset 0px 45px 7px -10px #3d5a76;
}
.actcell:hover {box-shadow: inset 0px 45px 7px -10px #3d5a76;
}
</style>
</head>
<body>
<h2>🎮 Календарь Заданий</h2>
<div class="calendar">
<!-- Примерная неделя -->
<div class="cell" data-day="14"></div>
<div class="cell" data-day="15"></div>
<div class="cell" data-day="16"></div>
<div class="cell" data-day="17"></div>
<div class="cell" data-day="18">собрать <a href="https://phantompact.rusff.me/viewtopic.php?id=322#p50219">паззл #1</a></div>
<div class="cell actcell" data-day="19">плейлист или музыкальная тема персонажа</div>
<div class="cell" data-day="20"> <div class="content blurred">заполнить анкету на перса из этой <a href="https://phantompact.rusff.me/viewtopic.php?id=172">темы</a></div></div>
<!-- следующая неделя -->
<div class="cell" data-day="21"> <div class="content blurred">написать пост</div></div>
<div class="cell" data-day="22"> <div class="content blurred">заполнить мудборд на тему ивента</div></div>
<div class="cell" data-day="23"> <div class="content blurred">решить кроссворд</div></div>
<div class="cell" data-day="24"> <div class="content blurred">♥</div></div>
<div class="cell" data-day="25"> <div class="content blurred">открыть или обновить личную тему в Уголке творца</div></div>
<div class="cell" data-day="26"> <div class="content blurred">решить кроссворд<p><hr><p><img src="https://upforme.ru/uploads/001c/76/35/2/839297.png" alt=""></div></div>
<div class="cell" data-day="27"> <div class="content blurred">нафлудить 100 сообщений</div></div>
<div class="cell" data-day="28"> <div class="content blurred">♥</div></div>
<div class="cell" data-day="29"> <div class="content blurred">скинуть ассоциации на 3 персонажей с ролевой</div></div>
<div class="cell" data-day="30"> <div class="content blurred">собрать паззл #1</div></div>
<div class="cell" data-day="31"> <div class="content blurred">♦</div></div>
<div class="cell" data-day="1"> <div class="content blurred">решить второй кроссворд</div></div>
<div class="cell" data-day="2"> <div class="content blurred">★</div></div>
<div class="cell" data-day="3"> <div class="content blurred">завести новый отыгрыш или решить 3ий пазл<p><hr><p><img src="https://upforme.ru/uploads/001c/76/35/2/839297.png" alt=""></div></div>
</div>
[/html]
v Ссылки на выполненные задания кидаем в этой теме v
