@@ -1128,7 +1270,6 @@ h1 .accent { color: var(--accent); }
const html = document.documentElement;
const themeToggle = document.getElementById('themeToggle');
-// Check saved preference
const savedTheme = localStorage.getItem('roi24-theme');
if (savedTheme) {
html.setAttribute('data-theme', savedTheme);
@@ -1154,7 +1295,7 @@ window.addEventListener('load', () => {
setTimeout(() => {
document.querySelectorAll('.dash-mini-fill').forEach(bar => {
- const target = bar.style.width || '0';
+ const target = bar.dataset.targetWidth || bar.style.width;
bar.style.width = '0';
requestAnimationFrame(() => {
requestAnimationFrame(() => {
@@ -1163,8 +1304,68 @@ window.addEventListener('load', () => {
});
});
}, 800);
+
+ // ── Feature #2: Counter Animation ──
+ animateCounters();
});
+/* ── Feature #2: Animated Counters ── */
+function animateCounters() {
+ document.querySelectorAll('.count-up').forEach(el => {
+ if (el.dataset.animated) return;
+ el.dataset.animated = 'true';
+
+ const text = el.textContent;
+ const match = text.match(/^(\d+\.?\d*)/);
+ if (!match) return;
+
+ const target = parseFloat(match[1]);
+ const prefix = text.substring(0, text.indexOf(match[1]));
+ const suffix = text.substring(text.indexOf(match[1]) + match[1].length);
+ const duration = 1500;
+ const startTime = performance.now();
+ const startVal = 0;
+
+ function easeOutQuart(t) { return 1 - Math.pow(1 - t, 4); }
+
+ function update(now) {
+ const elapsed = now - startTime;
+ const progress = Math.min(elapsed / duration, 1);
+ const easedProgress = easeOutQuart(progress);
+ const currentVal = startVal + (target - startVal) * easedProgress;
+
+ let display;
+ if (text.includes('.')) {
+ display = prefix + currentVal.toFixed(1) + suffix;
+ } else {
+ display = prefix + Math.round(currentVal) + suffix;
+ }
+
+ el.textContent = display;
+
+ if (progress < 1) {
+ requestAnimationFrame(update);
+ } else {
+ el.textContent = text;
+ }
+ }
+
+ requestAnimationFrame(update);
+ });
+}
+
+/* ── Feature #5: Live Clock ── */
+function updateClock() {
+ const now = new Date();
+ const timeStr = now.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+ const clockEl = document.getElementById('dashClock');
+ if (clockEl) {
+ clockEl.querySelector('.clock-time').textContent = timeStr;
+ }
+}
+setInterval(updateClock, 1000);
+updateClock();
+
/* ── SCROLL REVEAL ── */
const revealObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
@@ -1180,34 +1381,37 @@ document.querySelectorAll('.reveal').forEach(el => revealObserver.observe(el));
/* ── DASHBOARD SEGMENT TOGGLE ── */
const SEGMENTS = {
ecom: {
- revenue: '12.4М', revenueTrend: '+12%',
- margin: '23.4%', marginNote: '↑ 2.1% к прошлому месяцу',
- cash: '4.8М ₽', cashNote: 'Дебиторка: 1.2М',
+ revenue: '12.4', revenueTrend: '+12%',
+ margin: '23.4', marginNote: '↑ 2.1% к прошлому месяцу',
+ cash: '4.8', cashNote: 'Дебиторка: 1.2М',
mini: [
- { label: 'Конверсия', value: '2.8%', pct: 28, color: 'var(--blue)' },
- { label: 'CAC', value: '890₽', pct: 45, color: 'var(--amber)' },
- { label: 'ROI рекл.', value: '91%', pct: 91, color: 'var(--accent)' }
- ]
+ { label: 'Конверсия', value: '2.8', pct: 28, color: 'var(--blue)' },
+ { label: 'CAC', value: '890', pct: 45, color: 'var(--amber)' },
+ { label: 'ROI рекл.', value: '91', pct: 91, color: 'var(--accent)' }
+ ],
+ suffixes: ['М ₽', '%', 'М ₽', '%', '', '%']
},
services: {
- revenue: '3.8М', revenueTrend: '+8%',
- margin: '31.2%', marginNote: '↑ 1.4%',
- cash: '2.1М ₽', cashNote: 'Пайплайн: 8.5М',
+ revenue: '3.8', revenueTrend: '+8%',
+ margin: '31.2', marginNote: '↑ 1.4%',
+ cash: '2.1', cashNote: 'Пайплайн: 8.5М',
mini: [
- { label: 'Загрузка', value: '78%', pct: 78, color: 'var(--blue)' },
- { label: 'Марж. проект', value: '34%', pct: 68, color: 'var(--amber)' },
- { label: 'LTV', value: '185К', pct: 82, color: 'var(--accent)' }
- ]
+ { label: 'Загрузка', value: '78', pct: 78, color: 'var(--blue)' },
+ { label: 'Марж. проект', value: '34', pct: 68, color: 'var(--amber)' },
+ { label: 'LTV', value: '185', pct: 82, color: 'var(--accent)' }
+ ],
+ suffixes: ['М ₽', '%', 'М ₽', '%', '', 'К']
},
production: {
- revenue: '28.7М', revenueTrend: '+5%',
- margin: '18.7%', marginNote: '↓ 0.8%',
- cash: '6.2М ₽', cashNote: 'OEE: 72%',
+ revenue: '28.7', revenueTrend: '+5%',
+ margin: '18.7', marginNote: '↓ 0.8%',
+ cash: '6.2', cashNote: 'OEE: 72%',
mini: [
- { label: 'План/факт', value: '94%', pct: 94, color: 'var(--blue)' },
- { label: 'OEE', value: '72%', pct: 72, color: 'var(--amber)' },
- { label: 'Качество', value: '99.1%', pct: 99, color: 'var(--accent)' }
- ]
+ { label: 'План/факт', value: '94', pct: 94, color: 'var(--blue)' },
+ { label: 'OEE', value: '72', pct: 72, color: 'var(--amber)' },
+ { label: 'Качество', value: '99.1', pct: 99, color: 'var(--accent)' }
+ ],
+ suffixes: ['М ₽', '%', 'М ₽', '%', '', '%']
}
};
@@ -1227,9 +1431,10 @@ toggleBtns.forEach(btn => {
bigValue.style.transition = 'opacity 0.3s, transform 0.3s';
setTimeout(() => {
- bigValue.innerHTML = `${seg.revenue}
₽${seg.revenueTrend}`;
+ bigValue.innerHTML = `
${seg.revenue}${seg.suffixes[0]}${seg.revenueTrend}`;
bigValue.style.opacity = '1';
bigValue.style.transform = 'translateY(0)';
+ animateCounters();
}, 300);
const marginValue = document.getElementById('marginValue');
@@ -1243,11 +1448,12 @@ toggleBtns.forEach(btn => {
});
setTimeout(() => {
- marginValue.textContent = seg.margin;
+ marginValue.innerHTML = `
${seg.margin}%`;
marginNote.textContent = seg.marginNote;
- cashValue.textContent = seg.cash;
+ cashValue.innerHTML = `
${seg.cash}${seg.suffixes[2]}`;
cashNote.textContent = seg.cashNote;
[marginValue, marginNote, cashValue, cashNote].forEach(el => { el.style.opacity = '1'; });
+ animateCounters();
}, 280);
seg.mini.forEach((m, i) => {
@@ -1257,7 +1463,7 @@ toggleBtns.forEach(btn => {
miniVal.style.transform = 'translateY(-4px)';
setTimeout(() => {
- miniVal.textContent = m.value;
+ miniVal.innerHTML = `
${m.value}${seg.suffixes[4 + i] || ''}`;
miniVal.style.color = m.color;
miniVal.style.opacity = '1';
miniVal.style.transform = 'translateY(0)';
@@ -1269,7 +1475,7 @@ toggleBtns.forEach(btn => {
});
});
-/* ── FAQ ACCORDION ── */
+/* ── Feature #8: Enhanced FAQ Accordion ── */
document.querySelectorAll('.faq-q').forEach(q => {
q.addEventListener('click', () => {
const item = q.parentElement;
@@ -1279,25 +1485,31 @@ document.querySelectorAll('.faq-q').forEach(q => {
});
});
-/* ── HERO PARALLAX ── */
+/* ── Feature #7: 3D Tilt on Dashboard ── */
const hero = document.getElementById('hero');
const heroRight = document.getElementById('heroRight');
hero.addEventListener('mousemove', (e) => {
+ heroRight.classList.add('tilt-active');
const rect = hero.getBoundingClientRect();
const x = (e.clientX - rect.left) / rect.width - 0.5;
const y = (e.clientY - rect.top) / rect.height - 0.5;
- heroRight.style.transform = `translateY(${-6 + y * -4}px) perspective(800px) rotateY(${x * 1.5}deg) rotateX(${y * 1.5}deg)`;
+ heroRight.style.transform = `perspective(1200px) rotateX(${y * -8}deg) rotateY(${x * 8}deg) translateY(0)`;
+ heroRight.style.boxShadow = `${x * -30}px ${y * -30 + 20}px 80px rgba(34,197,94,0.06), 0 0 1px var(--border)`;
});
hero.addEventListener('mouseleave', () => {
- heroRight.style.transform = 'translateY(0) perspective(800px) rotateY(0) rotateX(0)';
- heroRight.style.transition = 'transform 0.6s var(--ease-out)';
+ heroRight.classList.remove('tilt-active');
+ heroRight.style.transform = '';
+ heroRight.style.boxShadow = '';
setTimeout(() => {
- heroRight.style.transition = 'transform 0.1s, opacity 0.8s var(--ease-out) 0.3s, box-shadow 0.5s var(--ease-out), background 0.5s var(--ease-out)';
- }, 600);
+ heroRight.style.transition = 'transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out)';
+ setTimeout(() => {
+ heroRight.style.transition = '';
+ }, 600);
+ }, 100);
});