![](https://i.imgur.com/N5qM2vM.png" "победитель конкурса: лекси кортез")
test
- Подпись автора
♥️
поле чудес х rich bitch x капсула х капсула'23
«good morning, reasons why I drink.»
Important
Страница: 1
Сообщений 1 страница 3 из 3
Поделиться12022-11-27 15:46:05
Поделиться22025-01-24 12:56:50
Код:
<!--HTML-->
<script>
/**
* Устанавливает прогресс на основе значения и максимума.
* @param {number} value - Текущее значение.
* @param {number} max - Максимальное значение.
*/
function setProgress(value, max) {
// Вычисляем процентное соотношение
const percent = (value / max) * 100;
const clampedPercent = Math.min(Math.max(percent, 0), 100); // Ограничиваем от 0 до 100
const progressBar = document.querySelector('.progress-bar');
const progressBarContainer = document.querySelector('.progress-bar-container');
// Установка прогресса
progressBar.style.setProperty('--progress', `${clampedPercent}%`);
progressBar.style.height = `${clampedPercent}%`;
// Установка текста в data-value
progressBarContainer.setAttribute('data-value', `${value} из ${max}`);
}
// Пример использования: установить значение 5200 из 10000
setProgress(4700, 6200);
</script>
<script>
/**
* Таймер обратного отсчета.
* @param {string} targetDate - Дата и время завершения в формате 'YYYY-MM-DDTHH:mm:ss'.
*/
function startCountdown(targetDate) {
const countdownElement = document.getElementById('countdown-timer');
const daysElement = document.getElementById('days');
const hoursElement = document.getElementById('hours');
const minutesElement = document.getElementById('minutes');
const secondsElement = document.getElementById('seconds');
function updateCountdown() {
const now = new Date();
const target = new Date(targetDate);
const difference = target - now;
if (difference <= 0) {
countdownElement.textContent = 'Событие наступило!';
clearInterval(interval);
return;
}
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((difference % (1000 * 60)) / 1000);
daysElement.textContent = days;
hoursElement.textContent = hours.toString().padStart(2, '0');
minutesElement.textContent = minutes.toString().padStart(2, '0');
secondsElement.textContent = seconds.toString().padStart(2, '0');
}
updateCountdown();
const interval = setInterval(updateCountdown, 1000);
}
// Запустить таймер до указанной даты
startCountdown('2025-01-31T00:00:00');
</script>
<style>
/* Таймер обратного отсчета */
.countdown-timer {
text-align: center;
font-size: 32px;
font-weight: bold;
margin-bottom: 20px;
color: rgba(19, 94, 135, 1);
text-transform: uppercase;
font-family: 'Bebas Neue';
}
/* Общий фон */
.progress-background {
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
/*background-color: #f0f0f0;*/
}
/* Контейнер прогресс-бара и шагов */
.progress-container {
position: relative;
width: 500px;
height: 800px;
background-color: #ffffff;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
display: flex;
justify-content: space-between;
}
/* Прогресс-бар */
.progress-bar-container {
position: relative;
width: 50px;
height: 100%;
background-color: #e0e0e0;
border-radius: 25px;
overflow: hidden;
margin: auto;
z-index: 10;
}
.progress-bar-container:hover::before {
content: attr(data-value);
position: relative;
display: block;
/* left: 100%; */
/* bottom: var(--progress); */
top: 50%;
transform: translateX(10px) translateY(50%);
background-color: rgba(19, 94, 135, 1);
color: #efefef;
font-size: 12px;
padding: 4px 8px;
border-radius: 5px;
white-space: nowrap;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
z-index: 20;
margin-left: -4px;
}
.progress-bar {
position: absolute;
bottom: 0;
width: 100%;
height: var(--progress);
background: linear-gradient(rgba(217,249,255,1) 16%, rgba(0,212,255,1) 45%, rgba(19,94,135,1) 94%);
transition: height 0.5s ease;
}
/* Отметки на шкале */
.progress-mark {
position: absolute;
left: 100%;
font-size: 12px;
color: #333;
transform: translateX(-50%);
white-space: nowrap;
/*bottom: calc(var(--position) * 1%);*/
margin-left: -25px;
font-weight: bold;
}
/* Шаги и линии */
.progress-steps {
position: absolute;
top: 10%;
left: 0px;
width: 100%;
height: 90%;
z-index: 3;
margin: 5px;
}
.progress-step {
position: absolute;
display: flex;
align-items: center;
/*bottom: calc(var(--position) * 1%);*/
}
.progress-step.left {
justify-content: flex-end;
margin-left: 75px;
}
.progress-step.right {
justify-content: flex-start;
/*left: auto;
right: 0;*/
margin-left: 275px;
}
.progress-dotted-line {
width: 80px;
height: 2px;
background-image: linear-gradient(to right, #333 50%, rgba(0, 0, 0, 0) 50%);
background-size: 6px 2px;
}
.progress-step.left .progress-dotted-line {
margin-right: 10px;
}
.progress-step.right .progress-dotted-line {
margin-left: 10px;
}
.progress-step-circle {
position: relative;
width: 75px;
height: 75px;
background-color: transparent;
border-radius: 50%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
/*box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);*/
transition: all 0.3s ease;
}
.progress-step-circle img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.progress-step-circle:hover {
width: 120px;
height: 120px;
border-radius: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
justify-content: flex-start;
padding: 5px;
background-color: #ffffff;
}
.progress-step-circle:hover img {
display: none;
}
.progress-step-circle .hover-content {
display: none;
color: #333;
font-size: 10px;
/* font-weight: bold; */
padding: 8px;
/* width: 100%; */
margin-right: 10px;
}
.progress-step-circle:hover .hover-content {
display: block;
}
</style>
<div class="countdown-timer" id="countdown-timer">
до конца ивента: <span id="days">0</span> дней
<span id="hours">00</span>:<span id="minutes">00</span>:<span id="seconds">00</span>
</div>
<div class="progress-background">
<div class="progress-container">
<!-- Прогресс-бар -->
<div class="progress-bar-container" data-value="5200">
<div class="progress-bar" style="--progress: 0%;"></div>
<!-- Отметки на шкале -->
<div class="progress-mark" style="bottom: 19.5%;">1200</div>
<div class="progress-mark" style="bottom: 38%">2400</div>
<div class="progress-mark" style="bottom: 57%">3600</div>
<div class="progress-mark" style="bottom: 76%">4800</div>
<div class="progress-mark" style="bottom: 90%">6000</div>
</div>
<!-- Круги с контентом -->
<div class="progress-steps">
<div class="progress-step left" style="bottom: 20%">
<div class="progress-step-circle">
<img src="https://i.imgur.com/OGt12dO.png" alt="Step 1">
<div class="hover-content">Текст 1</div>
</div>
<div class="progress-dotted-line"></div>
</div>
<div class="progress-step right" style="bottom: 40%">
<div class="progress-dotted-line"></div>
<div class="progress-step-circle">
<img src="https://i.imgur.com/uuXMDlO.png" alt="Step 2">
<div class="hover-content">Текст 1</div>
</div>
</div>
<div class="progress-step left" style="bottom: 60%">
<div class="progress-step-circle">
<img src="https://i.imgur.com/AtjkTbw.png" alt="Step 3">
<div class="hover-content">★ 1 000 000 сакр<br>
★ 200 чишек<br>
★ ачика на страницу</div>
</div>
<div class="progress-dotted-line"></div>
</div>
<div class="progress-step right" style="bottom: 80%;">
<div class="progress-dotted-line"></div>
<div class="progress-step-circle">
<img src="https://i.imgur.com/GJ7y1r7.png" alt="Step 4">
<div class="hover-content">Текст 1</div>
</div>
</div>
<div class="progress-step left" style="bottom: 95%">
<div class="progress-step-circle">
<img src="https://i.imgur.com/IAXiN5s.png" alt="Step 5">
<div class="hover-content">★ 1 000 000 сакр<br>
★ 200 чишек<br>
★ ачика на страницу</div>
</div>
<div class="progress-dotted-line"></div>
</div>
</div>
</div>
</div>
- Подпись автора
♥️
поле чудес х rich bitch x капсула х капсула'23
«good morning, reasons why I drink.»
Поделиться32025-01-24 14:46:39
А у нас с вами снова экспериментальный формат! Предлагю вашему вниманию сезонный пропуск Сакраменто - зимний! У нас с вами месяц на достижение главной цели, ведь ивент будет длиться до 24 февраля. Наша цель: вспомнить, что часть команды - часть корабля и не опускать руки под гнётом зимней хандры!
Ивент глобальный, так сказать касающийся всего нашего славного сервера оптом: учитываться будут достижения всех и каждого, но только те, кто в самом деле будет радеть за победу смогут претендовать на призы за наибольший вклад.
Резюмируя: нам предстоит снова объединиться и достичь общей цели с помощью совместной активности!Цель:
Набрать 6,000 баллов общими усилиями участников.
Особенности:
Результат зависит от общей активности всех участников.
Подсчёты баллов ведутся автоматически, что упрощает процесс участия - прогресс будет складываться из реальных достижений всех и каждого, а не только тех, кто добредёт до темы.
Главное — командная работа, ведь только вместе можно добиться успеха.Правила участия:
За каждый пост — 20 баллов.
За каждые 200 сообщений — 20 баллов.
За каждую эстетику — 10 баллов.
За каждую подборку — 10 баллов.
За закрытый эпизод — 20 баллов.Призы:
За каждые 1,200 баллов, набранные в рамках ивента, участники получают призы.
Участники, внёсшие наибольший вклад, получат особые награды.
По окончанию ивента будет открыта лавка, где можно будет потратить свои баллы (тут речь только о тех, что были зфиксированы в теме).Участие:
Достижения учитываются автоматически, но для подтверждения участия необходимо предоставлять ссылки на свои сообщения.
Ссылки подтверждают ваши действия, такие как публикации, сообщения, эстетики, подборки или закрытые эпизоды.
Будет таблица с личным зачётом и ни один ваш балл не будет потерян!Дополнительно:
Поощряется активное взаимодействие и поддержка друг друга. Вы все рок-звёзды!
Следить за текущим прогрессом можно будет прямо в теме, обновляться шкала будет раз в 3 дня.
Объединяем силы, участвуем активно и добиваемся общей цели вместе! 🚀
- Подпись автора
♥️
поле чудес х rich bitch x капсула х капсула'23
«good morning, reasons why I drink.»
Страница: 1
