возможно, понадобится корректировка цвета... возможно, на живую
[hideprofile][html]
<!-- календарь -->
<script type="text/javascript" src="https://forumstatic.ru/files/001c/7d/52/33145.js?v=8"></script>
<style>
#music-audio {
display: none;
}
/* Фоны для каждой карточки по data-day атрибуту */
/* Фоны для адвент-календаря - 31 день */
.advent-card .card-front {filter: sepia(1) hue-rotate(250deg) saturate(0.3);}
.dark .advent-card .card-front {filter: sepia(1) hue-rotate(250deg) saturate(0.3);}
.advent-card .card-front img {opacity:0;}
.advent-card[data-day="1"] .card-front {
background: url('https://i.yapx.ru/cdQ1F.png') center/cover no-repeat!important;
}
.advent-card[data-day="2"] .card-front {
background: url('https://i.yapx.ru/cdQ1H.png') center/cover no-repeat!important;
}
.advent-card[data-day="3"] .card-front {
background: url('https://i.yapx.ru/cdQ1J.png') center/cover no-repeat!important;
}
.advent-card[data-day="4"] .card-front {
background: url('https://i.yapx.ru/cdQ1K.png') center/cover no-repeat!important;
}
.advent-card[data-day="5"] .card-front {
background: url('https://i.yapx.ru/cdQ1L.png') center/cover no-repeat!important;
}
.advent-card[data-day="6"] .card-front {
background: url('https://i.yapx.ru/cdQ1M.png') center/cover no-repeat!important;
}
.advent-card[data-day="7"] .card-front {
background: url('https://i.yapx.ru/cdQ1P.png') center/cover no-repeat!important;
}
.advent-card[data-day="8"] .card-front {
background: url('https://i.yapx.ru/cdQ1Q.png') center/cover no-repeat!important;
}
.advent-card[data-day="9"] .card-front {
background: url('https://i.yapx.ru/cdQ1S.png') center/cover no-repeat!important;
}
.advent-card[data-day="10"] .card-front {
background: url('https://i.yapx.ru/cdQ1U.png') center/cover no-repeat!important;
}
.advent-card[data-day="11"] .card-front {
background: url('https://i.yapx.ru/cdQ1W.png') center/cover no-repeat!important;
}
.advent-card[data-day="12"] .card-front {
background: url('https://i.yapx.ru/cdQ1Y.png') center/cover no-repeat!important;
}
.advent-card[data-day="13"] .card-front {
background: url('https://i.yapx.ru/cdQ1Z.png') center/cover no-repeat!important;
}
.advent-card[data-day="14"] .card-front {
background: url('https://i.yapx.ru/cdQ1a.png') center/cover no-repeat!important;
}
.advent-card[data-day="15"] .card-front {
background: url('https://i.yapx.ru/cdQ1c.png') center/cover no-repeat!important;
}
.advent-card[data-day="16"] .card-front {
background: url('https://i.yapx.ru/cdQ1d.png') center/cover no-repeat!important;
}
.advent-card[data-day="17"] .card-front {
background: url('https://i.yapx.ru/cdQ1e.png') center/cover no-repeat!important;
}
.advent-card[data-day="18"] .card-front {
background: url('https://i.yapx.ru/cdQ10.png') center/cover no-repeat!important;
}
.advent-card[data-day="19"] .card-front {
background: url('https://i.yapx.ru/cdQ1g.png') center/cover no-repeat!important;
}
.advent-card[data-day="20"] .card-front {
background: url('https://i.yapx.ru/cdQ1i.png') center/cover no-repeat!important;
}
.advent-card[data-day="21"] .card-front {
background: url('https://i.yapx.ru/cdQ1j.png') center/cover no-repeat!important;
}
.advent-card[data-day="22"] .card-front {
background: url('https://i.yapx.ru/cdQ1k.png') center/cover no-repeat!important;
}
.advent-card[data-day="23"] .card-front {
background: url('https://i.yapx.ru/cdQ1n.png') center/cover no-repeat!important;
}
.advent-card[data-day="24"] .card-front {
background: url('https://i.yapx.ru/cdQ1o.png') center/cover no-repeat!important;
}
.advent-card[data-day="25"] .card-front {
background: url('https://i.yapx.ru/cdQ1q.png') center/cover no-repeat!important;
}
.advent-card[data-day="26"] .card-front {
background: url('https://i.yapx.ru/cdQ1r.png') center/cover no-repeat!important;
}
.advent-card[data-day="27"] .card-front {
background: url('https://i.yapx.ru/cdQ1u.png') center/cover no-repeat!important;
}
.advent-card[data-day="28"] .card-front {
background: url('https://i.yapx.ru/cdQ1v.png') center/cover no-repeat!important;
}
.advent-card[data-day="29"] .card-front {
background: url('https://i.yapx.ru/cdQ1w.png') center/cover no-repeat!important;
}
.advent-card[data-day="30"] .card-front {
background: url('https://i.yapx.ru/cdQ1y.png') center/cover no-repeat!important;
}
.advent-card[data-day="31"] .card-front {
background: url('https://i.yapx.ru/cdQ1z.png') center/cover no-repeat!important;
}
/* ОСТАЛЬНОЕ */
.header-c {font: 400 20px / 100% var(--playfaird); color: rgb(var(--c_gnrl_2)); letter-spacing: -1px; padding:5px 10px; border-radius:50px;background: #fff; width:500px; margin:10px auto;text-align:center;}
.dark .header-c {font: 400 20px / 100% var(--playfaird); color: rgb(var(--dark_c_gnrl)); letter-spacing: -1px; padding:5px 10px; border-radius:50px;background: rgb(var(--dark_c_darkgray)); width:500px; margin:10px auto;text-align:center;}
.award-c {background: rgb(var(--c_lightgray)); margin:0px auto;padding: 5px 10px; border-radius:8px;width:520px; text-align:justify;}
.dark .award-c {
background: rgb(var(--dark_c_lightgray));
margin: 0px auto;
padding: 5px 10px;
border-radius: 8px;
width: 520px;
text-align:justify;
}
#incrementNumberContainer {
text-align: center;
background: rgb(var(--c_lightgray));
border-radius: 8px;
width: 300px;
margin: 10px auto!important;
}
.advent-row {
display: flex;
width: 820px;
gap: 0px;
align-items: center;
margin:0 auto;
position: relative;
background: #fbfbfb;
border-radius: 20px;
}
.dark .advent-row {
background: rgb(var(--dark_c_lightgray));
}
.advent-row::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 90px;
transform: translateY(-50%);
background-color: rgb(var(--c_lightgray));
border-radius: 0px;
z-index: 0;
}
.dark .advent-row::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 90px;
transform: translateY(-50%);
background-color: rgb(var(--dark_c_darkgray));
border-radius: 0px;
z-index: 0;
}
/* ===== НОВЫЙ МИНИ-ПЛЕЕР ===== */
.mini-player {
width: 170px;
background: #fff;
border-radius: 12px;
overflow: visible;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
z-index: 1;
padding: 5px 10px;
position: relative;
}
.mini-player::before,
.mini-player::after {
content: "";
position: absolute;
width: 10px;
height: 130px;
background: #ccc;
top: 50%;
transform: translateY(-50%);
}
.mini-player::before {
left: 0;
border-radius: 0px 20px 20px 0px;
}
.mini-player::after {
right: 0;
border-radius: 20px 0px 0px 20px;
}
.dark .mini-player::before,
.dark .mini-player::after {
background: rgb(var(--dark_c_lightgray));
}
.dark .mini-player {
background: rgb(var(--dark_c_darkgray));
box-shadow: 0 2px 8px rgba(0,0,0,0);
border:1px solid rgb(var(--dark_c_gnrl) / 30%);
}
.post-header {
position: relative;
padding: 3px 0 0;
}
.menu-dots {
color: #666;
font-size: 18px;
letter-spacing: 2px;
}
.dark .menu-dots {
color: #999;
}
.like-badge {
position: absolute;
top: -20px;
right: -20px;
background: rgb(255, 255, 255, 0.05);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
width: 28px;
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.dark .like-badge {
background: rgb(40 30 24 / 50%);
box-shadow: 0 0px 5px rgba(255,255,255,0.1);
}
.like-badge::before {
content: "❤";
color: #ff3b30;
font-size: 16px;
padding-top:3px;
}
.video-container {
width: 130px;
height: 130px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin: 5px auto 0;
border-radius: 16px;
}
.cover {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 1; border-radius: 16px; object-position: right;
}
.play-button {
position: absolute;
width: 50px;
height: 50px;
border: 1px solid rgb(255, 255, 255, 0.4);
background: rgb(255, 255, 255, 0.3);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
z-index: 2;
}
.dark .play-button {
position: absolute;
width: 50px;
height: 50px;
border:1px solid rgb(0, 0, 0, 0);
background: rgb(0, 0, 0, 0.3);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: 0.3s;
z-index: 2;
}
.play-button:hover {
background: rgba(255,255,255,0.5);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
transform: scale(1.1);
}
.play-button.playing::after {
content: "❚❚";
font-size: 14px;
color: #444;padding-top:1px;
}
.play-button:not(.playing)::after {
content: "▶";
font-size: 20px;
color: #444;
margin-left: 4px; padding-top:1px;
}
.player-content {
padding: 10px 10px 5px;
}
.player-content p {
margin: 0;
font-size: 9px!important;
color: #666;
line-height: 1.1;
text-align: center;
}
.dark .player-content p {
color: #fff;
}
.post-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0px;
}
.dark .post-footer {
}
.comment-btn {
background: #ccc;
border: none;
padding: 6px 28px;
border-radius: 15px;
font-size: 9px;
color: #fff;
cursor: pointer;
}
.dark .comment-btn {
background: rgb(var(--dark_c_lightgray));
border:none;
}
.footer-icons {
display: flex;
gap: 10px;
}
.heart-icon, .user-icon {
font-size: 14px;
cursor: pointer;
opacity: 0.6;
transition: 0.2s;
}
.heart-icon:hover, .user-icon:hover {
opacity: 1;
}
.advent-calendar-container {
padding: 0px; position: relative;
}
.cards-scroll-container {
overflow-x: auto;
margin: 0 50px;
scrollbar-width: thin;
scrollbar-color: rgb(var(--c_gnrl)) rgb(var(--c_lightgray));
width:550px;
}
.dark .cards-scroll-container {
scrollbar-color: rgb(var(--c_lightbrown)) rgb(var(--dark_c_lightgray));
}
.advent-calendar-container::before {
content: "❮";
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 28px;
opacity: 0.5;
transition: opacity 0.3s;
}
.advent-calendar-container::after {
content: "❯";
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
color: #fff;
font-size: 28px;
opacity: 0.5;
transition: opacity 0.3s;
}
/* При наведении на контейнер стрелки становятся ярче */
.cards-scroll-container:hover::before,
.cards-scroll-container:hover::after {
opacity: 0.8;
}
.cards-scroll-container::-webkit-scrollbar {
height: 6px;
}
.cards-scroll-container::-webkit-scrollbar-track {
background: rgb(var(--c_lightgray));
border-radius: 3px;
}
.cards-scroll-container::-webkit-scrollbar-thumb {
background-color: rgb(var(--c_gnrl));
border-radius: 3px;
}
.cards-container {
display: flex;
gap: 10px;
padding: 10px 0;
width: max-content;
min-width: 100%;
}
.advent-card {
width: 100px;
height: 145px;
flex: 0 0 auto;
perspective: 600px;
}
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
border-radius: 8px;
border: 1px solid rgb(114 114 114);
}
.card-front, .card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 8px;
overflow: hidden;
}
.card-front {
background: rgb(var(--c_darkgray));
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
}
.card-front img { filter: sepia(1) hue-rotate(135deg) saturate(0.6); border-radius: 8px;}
.card-back {
background: white;
transform: rotateY(180deg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 8px;
box-sizing: border-box;
}
.dark .card-back {
background: rgb(65 69 78);
transform: rotateY(180deg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 8px;
box-sizing: border-box;
}
.card-front-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.card-back-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
}
.reward-text {
color: rgb(var(--c_gnrl));
font-size: 9px;
text-align: center;
line-height: 1;
margin: 0;
word-break: break-word;
max-height: 40px;
overflow: hidden;
}
.dark .reward-text {
color: #fff;
font-size: 9px;
text-align: center;
line-height: 1;
margin: 0;
word-break: break-word;
max-height: 40px;
overflow: hidden;
}
.day-number {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
background-color: rgb(var(--c_gnrl));
color: #333;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 11px;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
z-index: 2;
}
.day-number.completed {
background-color: rgb(var(--c_gnrl));
}
.day-number.current {
box-shadow: 0 0 8px rgba(var(--c_gnrl), 0.7);
animation: pulse 2s infinite;
}
.status-indicator {
font-size: 9px;
color: rgb(var(--c_darkgray));
text-align: center;
margin-top: 5px;
padding: 2px 4px;
border-radius: 3px;
background: rgba(var(--c_lightgray), 0.5);
}
.status-completed {
color: rgb(var(--c_gnrl_2));
font-weight: bold;
}
.status-current {
color: rgb(var(--c_gnrl));
font-weight: bold;
}
.status-pending {
color: rgb(var(--c_darkgray));
}
.progress-info {
text-align: center;
margin-top: 15px;
color: rgb(var(--c_gnrl_2));
font-size: 10px;
font-weight: 500;
}
.dark .progress-info {
color: rgb(var(--dark_c_gnrl));
}
.card-available {
cursor: pointer;
}
.card-available:hover .card-inner {
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
@keyframes pulse {
0% { transform: translateX(-50%) scale(1); }
50% { transform: translateX(-50%) scale(1.2); }
100% { transform: translateX(-50%) scale(1); }
}
.current-date-info {display:none;}
.card-back-content .mark-btn.completed {
font-size: 8px;
color: rgb(var(--c_gnrl));
margin-top: 5px;
padding: 0 5px;
border: 2px solid rgb(var(--c_gnrl));
border-radius: 50px;
}
.dark .card-back-content .mark-btn.completed {
color: #f1f1f1;
border: 2px solid rgb(var(--dark_c_gnrl));
}
.dark #incrementNumberContainer {
text-align: center;
background: rgb(var(--dark_c_lightgray));
border-radius: 8px;
width: 300px;
margin: 10px auto !important;
}
/* Внутренний контейнер для 3D-переворота — критически важно */
.card-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.6s ease-in-out;
transform-style: preserve-3d; /* Обязательно для 3D-эффекта */
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border: 1px solid rgb(114, 114, 114);
}
/* Передняя сторона карточки */
.card-front {
background: rgb(var(--c_darkgray));
color: white;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* Скрываем обратную сторону */
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
/* Задняя сторона карточки */
.card-back {
background: white;
color: #333;
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden; /* Скрываем обратную сторону */
border-radius: 8px;
transform: rotateY(180deg); /* Изначально повёрнута на 180° */
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 8px;
box-sizing: border-box;
}
/* Эффект переворота — главное правило */
.advent-card.flipped .card-inner {
transform: rotateY(180deg); /* Поворот на 180° при добавлении класса flipped */
}
.mark-btn {
font-size: 10px !important;
padding: 1px 8px !important;
}
/* Светлый текст для кнопки "Отмечено" в тёмной теме */
.dark .mark-btn.completed,
.dark .mark-btn:disabled {
color: #ffffff !important;
border-color: rgba(255, 255, 255, 0.5) !important;
}
/* Если кнопка находится в .card-back-content */
.dark .card-back-content .mark-btn.completed {
color: #ffffff !important;
}
</style>
<div style="margin:0px auto 20px;">
<div class='award-c'><div class='header-c'>Ежедневный адвент календарь</div>
• отмечайтесь каждый день для того, чтобы распаковать адвент и получить свою награду! мы приготовили для вас разные награды на каждый день календаря.
<br>• для того, чтобы открыть первую ячейку, оставьте "1" или нажмите "отметиться"<br>• отметки открываются по порядку. если вы начинаете отмечаться не с 1 числа или пропустили день-два-три, вы продолжаете на том числе, на котором остановились, но в таком случае, вы получите лишь те награды, которые успели собрать.<br>• помимо звёзд в календаре вам могут попасться подписки, а так же у вас есть возможность собрать лимитированное оформление<br>• если скрипт не сработал, попробуйте обновить страницу, продолжайте оставлять отметки в теме, в любой непонятной ситуации <s>вызывайте 9-1-1</s>, обращайтесь в тему <a href="https://kakaotalk.rusff.me/viewtopic.php?id=5">связь с амс</a><br>• если вы пропустили день, вы можете его восполнить, оплатив дополнительную отметку в <a href="https://kakaotalk.rusff.me/viewtopic.php?id=23">банке</a>. в сообщении с дополнительной отметкой должна быть ссылка на банк с оформленной покупкой; не более одной дополнительной отметки в день
</div>
</div>
<div class="advent-row">
<!-- НОВЫЙ МИНИ-ПЛЕЕР -->
<div class="mini-player">
<div class="post-header">
<div class="menu-dots">⋯</div>
<div class="like-badge"></div>
</div>
<div class="video-container">
<img src="https://upforme.ru/uploads/001c/9b/a1/4/158707.png" class="cover" alt="cover">
<button class="play-button"></button>
</div>
<div class="player-content">
<p><b>you are my</b><br>favorite anything</p>
</div>
<div class="post-footer">
<button class="comment-btn">Comment</button>
<div class="footer-icons">
<span class="heart-icon"><i class="fa-solid fa-heart"></i></span>
<span class="user-icon"><i class="fa-solid fa-user"></i></span>
</div>
</div>
<!-- Аудио элемент -->
<audio id="music-audio">
<source src="https://forumstatic.ru/files/001c/99/f1/37925.mp3" type="audio/mpeg">
Ваш браузер не поддерживает аудио элемент.
</audio>
</div>
<!-- Контейнер для календаря -->
<div id="adventCalendar" class="advent-calendar-container">
<div class="current-date-info" id="currentDateInfo">
<!-- Текущая дата будет здесь -->
</div>
<!-- Контейнер с горизонтальной прокруткой -->
<div class="cards-scroll-container">
<div id="cardsContainer" class="cards-container">
<!-- Карточки будут созданы скриптом -->
</div>
</div>
</div>
</div>
<!-- Информация о прогрессе -->
<div class="progress-info">
<b>прогресс отметок для Гость</b>: <span id="progressText">0/31</span>
</div>
<div id="incrementNumberContainer" style="margin: 10px 0; padding: 10px; ">
<div id="lastMarkInfo" style="margin-bottom: 8px;">
Загрузка последней отметки...
</div>
<button id="incrementNumberBtn">
Отметиться!
</button>
</div>
</div>
[/html]
</msg>
</msg>
