r10dev Yeni Yıl Geri Sayım ve Kar Efekti – XenForo Yılbaşı Tasarım Eklentisi (1 İzleyici)

Aşağıya PAGE_CONTAINER’a ekleyeceğin HTML + JS ve extra.less’e ekleyeceğin CSS’nin tamamen düzenlenmiş halini bırakıyorum.

✅ PAGE_CONTAINER’a Eklenen Kısım ( r10dev)
<div class="r10dev-ny-block" role="region" aria-label="Yeni yıl geri sayımı">
<div class="r10dev-ny-title">
<div class="r10dev-brand">Yeni yılınız kutlu olsun! Nice yıllara..</div>
<div class="r10dev-headline">r10dev Yeni yılınızı kutlar.</div>
    <div class="r10dev-headline">Bu alana dilediğiniz yazıyı yazabilirsiniz..</div>
</div>

<div class="r10dev-countdown" aria-live="polite">
<div class="r10dev-time-segment" id="days"><div class="num">0</div><span class="label">Gün</span></div>
<div class="r10dev-time-segment" id="hours"><div class="num">00</div><span class="label">Saat</span></div>
<div class="r10dev-time-segment" id="minutes"><div class="num">00</div><span class="label">Dakika</span></div>
<div class="r10dev-time-segment" id="seconds"><div class="num">00</div><span class="label">Saniye</span></div>
<div class="r10dev-target-year" id="targetYear" aria-hidden="true">2026</div>
</div>
</div>

<script>
// Hedef yılı otomatik belirler
const now = new Date();
const currentYear = now.getFullYear();
const target = new Date(currentYear + 1, 0, 1, 0, 0, 0, 0);

document.getElementById('targetYear').textContent = target.getFullYear();

// DOM referansları
const D = document.querySelector('#days .num');
const H = document.querySelector('#hours .num');
const M = document.querySelector('#minutes .num');
const S = document.querySelector('#seconds .num');

function updateCountdown(){
const t = target - new Date();
if(t<=0){
D.textContent = '0'; H.textContent='00'; M.textContent='00'; S.textContent='00';
return;
}
const sec = Math.floor(t/1000) % 60;
const min = Math.floor(t/1000/60) % 60;
const hrs = Math.floor(t/1000/60/60) % 24;
const days = Math.floor(t/1000/60/60/24);

D.textContent = days;
H.textContent = String(hrs).padStart(2,'0');
M.textContent = String(min).padStart(2,'0');
S.textContent = String(sec).padStart(2,'0');
}

updateCountdown();
setInterval(updateCountdown, 1000);

// Kar tanecikleri
const block = document.querySelector('.r10dev-ny-block');
const snowCount = 36;
for(let i=0;i<snowCount;i++){
const s = document.createElement('div');
s.className = 'snowflake';
const size = Math.random()*8 + 4;
s.style.width = `${size}px`;
s.style.height = `${size}px`;
s.style.left = `${Math.random()*100}%`;
s.style.opacity = (Math.random()*0.6 + 0.3).toFixed(2);
const delay = Math.random()*-20;
const duration = Math.random()*10 + 6;
s.style.transform = `translateY(-10px)`;
s.style.borderRadius = '50%';
s.style.background = 'linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.6))';
s.style.boxShadow = '0 2px 6px rgba(0,0,0,0.35)';
s.style.animation = `fall ${duration}s linear ${delay}s infinite`;
s.style.zIndex = 2;
block.appendChild(s);
}

// Keyframes ekle
const style = document.createElement('style');
style.innerHTML = `@keyframes fall{0%{transform: translateY(-10vh) translateX(0)}100%{transform: translateY(120vh) translateX(20px)}}`;
document.head.appendChild(style);
</script>

✅ extra.less’e Eklenen CSS ( r10dev)
:root{
  --bg-1:#061021;
  --bg-2:#08162b;
  --neon:#00f0ff;
  --accent:#ff6ec7;
  --glass: rgba(255,255,255,0.04);
  --soft: rgba(255,255,255,0.06);
}
html,body{height:100%;margin:0;font-family:Inter, 'Segoe UI', Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial;}

.r10dev-ny-block{
  width:100%;
  min-height:160px;
  box-sizing:border-box;
  padding:28px 48px;
  background: linear-gradient(90deg, #c70e15 0%, #530910 100%);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  position:relative;
  overflow:hidden;
  margin-bottom: 10px;
}

.r10dev-ny-title{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:280px;}
.r10dev-brand{
  font-weight:700;
  font-size:28px;
  letter-spacing:0.6px;
}
.r10dev-headline{
  font-size:22px;
  line-height:1;
  opacity:0.95;
}

.r10dev-countdown{
  display:flex;
  align-items:center;
  gap:18px;
}
.r10dev-time-segment{
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  padding:12px 18px;
  border-radius:10px;
  min-width:92px;
  text-align:center;
  box-shadow: 0 6px 20px rgba(2,6,23,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  backdrop-filter: blur(6px);
}
.r10dev-time-segment .num{
  font-size:34px;
  font-weight:700;
  letter-spacing:1px;
  text-shadow:0 4px 18px rgba(0,0,0,0.5), 0 0 10px rgba(0,240,255,0.06);
}
.r10dev-time-segment .label{
  display:block;
  margin-top:6px;
  font-size:12px;
  opacity:0.8;
  text-transform:uppercase;
  letter-spacing:1px;
}

.r10dev-target-year{
  margin-left:8px;
  font-weight:800;
  font-size:40px;
  letter-spacing:2px;
  transform: translateZ(0);
  text-shadow: 0 6px 30px rgba(0,0,0,0.6), 0 0 18px rgba(0,240,255,0.12);
  -webkit-text-stroke: 0.6px rgba(255,255,255,0.02);
  color:transparent;
  background: linear-gradient(90deg, #ffd52a, #fff6d5);
  -webkit-background-clip: text;
  background-clip: text;
  animation:pulseGlow 2.6s ease-in-out infinite;
}

.snowflake{
  position: absolute;
  top:-10px;
  pointer-events:none;
  z-index:2;
  opacity:0.9;
  filter: blur(.2px);
}

@media (max-width:720px){
  .r10dev-ny-block{padding:18px 16px;flex-direction:column;align-items:center;gap:18px}
  .r10dev-countdown{flex-wrap:wrap;justify-content:center}
  .r10dev-target-year{font-size:28px}
}

@keyframes pulseGlow{
  0%{filter: drop-shadow(0 0 6px rgba(0,240,255,0.06))}
  50%{filter: drop-shadow(0 0 18px rgba(0,240,255,0.18))}
  100%{filter: drop-shadow(0 0 6px rgba(0,240,255,0.06))}
}