Update slider UX/UI
This commit is contained in:
lockbitchat
@@ -1,168 +1,190 @@
|
||||
// Slider Component
|
||||
const UniqueFeatureSlider = () => {
|
||||
const [currentSlide, setCurrentSlide] = React.useState(0);
|
||||
|
||||
const slides = [
|
||||
{
|
||||
icon: "fas fa-shield-halved",
|
||||
color: "orange",
|
||||
title: "18-Layer Military Security",
|
||||
description: "Revolutionary defense system with ECDH P-384 + AES-GCM 256 + ECDSA + Complete ASN.1 Validation. Enhanced Security Edition provides military-grade protection exceeding government standards with complete key structure verification."
|
||||
},
|
||||
{
|
||||
icon: "fas fa-network-wired",
|
||||
color: "purple",
|
||||
title: "Pure P2P WebRTC Architecture",
|
||||
description: "Direct peer-to-peer connections without any servers. Impossible to censor, block, or monitor. Complete decentralization with zero infrastructure."
|
||||
},
|
||||
{
|
||||
icon: "fas fa-sync-alt",
|
||||
color: "green",
|
||||
title: "Perfect Forward Secrecy",
|
||||
description: "Automatic key rotation every 5 minutes or 100 messages. Non-extractable keys with hardware protection ensure past messages remain secure."
|
||||
},
|
||||
{
|
||||
icon: "fas fa-user-secret",
|
||||
color: "cyan",
|
||||
title: "Advanced Traffic Obfuscation",
|
||||
description: "Fake traffic generation, packet padding, and pattern masking make communication indistinguishable from random noise. Defeats traffic analysis."
|
||||
},
|
||||
{
|
||||
icon: "fas fa-eye-slash",
|
||||
color: "blue",
|
||||
title: "Zero Data Collection",
|
||||
description: "No registration, no servers, no logs. Messages exist only in browser memory. Complete anonymity with instant anonymous channels."
|
||||
},
|
||||
{
|
||||
icon: "fas fa-code",
|
||||
color: "emerald",
|
||||
title: "100% Open Source Security",
|
||||
description: "All code is open for audit under MIT license. Uses only standard WebCrypto APIs. Cryptography runs directly in browser without server dependencies."
|
||||
}
|
||||
];
|
||||
|
||||
const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % slides.length);
|
||||
const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);
|
||||
const goToSlide = (index) => setCurrentSlide(index);
|
||||
|
||||
React.useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
nextSlide();
|
||||
}, 15000);
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
return React.createElement('div', {
|
||||
className: "mt-12"
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'header',
|
||||
className: "text-center mb-8"
|
||||
}, [
|
||||
React.createElement('h3', {
|
||||
key: 'title',
|
||||
className: "text-2xl font-semibold text-primary mb-3"
|
||||
}, 'Why SecureBit.chat is unique'),
|
||||
React.createElement('p', {
|
||||
key: 'subtitle',
|
||||
className: "text-secondary max-w-2xl mx-auto"
|
||||
}, 'The only messenger with military-grade cryptography')
|
||||
]),
|
||||
|
||||
React.createElement('div', {
|
||||
key: 'slider-container',
|
||||
className: "relative max-w-4xl mx-auto"
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'slider-wrapper',
|
||||
className: "overflow-hidden rounded-xl"
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'slides',
|
||||
className: "flex transition-transform duration-500 ease-in-out",
|
||||
style: { transform: `translateX(-${currentSlide * 100}%)` }
|
||||
}, slides.map((slide, index) =>
|
||||
React.createElement('div', {
|
||||
key: index,
|
||||
className: "w-full flex-shrink-0 px-4"
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'slide-content',
|
||||
className: "card-minimal rounded-xl p-8 text-center min-h-[300px] flex flex-col justify-center relative overflow-hidden"
|
||||
}, [
|
||||
// Background icon
|
||||
React.createElement('i', {
|
||||
key: 'bg-icon',
|
||||
className: `${slide.icon} absolute right-[-100px] top-1/2 -translate-y-1/2 opacity-10 text-[300px] pointer-events-none ${
|
||||
slide.color === 'orange' ? 'text-orange-500' :
|
||||
slide.color === 'yellow' ? 'text-yellow-500' :
|
||||
slide.color === 'purple' ? 'text-purple-500' :
|
||||
slide.color === 'green' ? 'text-green-500' :
|
||||
slide.color === 'cyan' ? 'text-cyan-500' :
|
||||
slide.color === 'blue' ? 'text-blue-500' :
|
||||
'text-emerald-500'
|
||||
}`
|
||||
}),
|
||||
|
||||
// Content
|
||||
React.createElement('h4', {
|
||||
key: 'slide-title',
|
||||
className: "text-xl font-semibold text-primary mb-4 relative z-10"
|
||||
}, slide.title),
|
||||
React.createElement('p', {
|
||||
key: 'slide-description',
|
||||
className: "text-secondary leading-relaxed max-w-2xl mx-auto relative z-10"
|
||||
}, slide.description)
|
||||
])
|
||||
])
|
||||
))
|
||||
]),
|
||||
|
||||
// Navigation
|
||||
React.createElement('button', {
|
||||
key: 'prev-btn',
|
||||
onClick: prevSlide,
|
||||
className: "absolute left-2 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-gray-600/80 hover:bg-gray-500/80 text-white rounded-full flex items-center justify-center transition-all duration-200 z-10"
|
||||
}, [
|
||||
React.createElement('i', {
|
||||
key: 'prev-icon',
|
||||
className: "fas fa-chevron-left"
|
||||
})
|
||||
]),
|
||||
React.createElement('button', {
|
||||
key: 'next-btn',
|
||||
onClick: nextSlide,
|
||||
className: "absolute right-2 top-1/2 transform -translate-y-1/2 w-10 h-10 bg-gray-600/80 hover:bg-gray-500/80 text-white rounded-full flex items-center justify-center transition-all duration-200 z-10"
|
||||
}, [
|
||||
React.createElement('i', {
|
||||
key: 'next-icon',
|
||||
className: "fas fa-chevron-right"
|
||||
})
|
||||
])
|
||||
]),
|
||||
|
||||
// Enhanced dots navigation (оставляем улучшенные точки)
|
||||
React.createElement('div', {
|
||||
key: 'dots-container',
|
||||
className: "flex justify-center space-x-3 mt-6"
|
||||
}, slides.map((slide, index) =>
|
||||
React.createElement('button', {
|
||||
key: index,
|
||||
onClick: () => goToSlide(index),
|
||||
className: `relative group transition-all duration-300 ${
|
||||
index === currentSlide
|
||||
? 'w-12 h-2 bg-orange-500 rounded-full'
|
||||
: 'w-4 h-2 bg-gray-600 hover:bg-gray-500 rounded-full hover:scale-125'
|
||||
}`
|
||||
}, [
|
||||
// Tooltip on hover
|
||||
React.createElement('div', {
|
||||
key: 'tooltip',
|
||||
className: "absolute -top-10 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none"
|
||||
}, slide.title)
|
||||
])
|
||||
))
|
||||
]);
|
||||
};
|
||||
// Enhanced Modern Slider Component with Original CSS Classes
|
||||
const UniqueFeatureSlider = () => {
|
||||
const trackRef = React.useRef(null);
|
||||
const wrapRef = React.useRef(null);
|
||||
const dotsRef = React.useRef(null);
|
||||
const [current, setCurrent] = React.useState(0);
|
||||
|
||||
window.UniqueFeatureSlider = UniqueFeatureSlider;
|
||||
const slides = [
|
||||
{
|
||||
icon: "🛡️",
|
||||
bgImage: "linear-gradient(135deg, rgb(255 107 53 / 6%) 0%, rgb(255 140 66 / 45%) 100%)",
|
||||
thumbIcon: "🔒",
|
||||
title: "18-Layer Military Security",
|
||||
description: "Revolutionary defense system with ECDH P-384 + AES-GCM 256 + ECDSA + Complete ASN.1 Validation."
|
||||
},
|
||||
{
|
||||
icon: "🌐",
|
||||
bgImage: "linear-gradient(135deg, rgb(147 51 234 / 6%) 0%, rgb(168 85 247 / 45%) 100%)",
|
||||
thumbIcon: "🔗",
|
||||
title: "Pure P2P WebRTC",
|
||||
description: "Direct peer-to-peer connections without any servers. Complete decentralization with zero infrastructure."
|
||||
},
|
||||
{
|
||||
icon: "🔄",
|
||||
bgImage: "linear-gradient(135deg, rgb(16 185 129 / 6%) 0%, rgb(52 211 153 / 45%) 100%)",
|
||||
thumbIcon: "⚡",
|
||||
title: "Perfect Forward Secrecy",
|
||||
description: "Automatic key rotation every 5 minutes. Non-extractable keys with hardware protection."
|
||||
},
|
||||
{
|
||||
icon: "🎭",
|
||||
bgImage: "linear-gradient(135deg, rgb(6 182 212 / 6%) 0%, rgb(34 211 238 / 45%) 100%)",
|
||||
thumbIcon: "🌫️",
|
||||
title: "Traffic Obfuscation",
|
||||
description: "Fake traffic generation and pattern masking make communication indistinguishable from noise."
|
||||
},
|
||||
{
|
||||
icon: "👁️",
|
||||
bgImage: "linear-gradient(135deg, rgb(37 99 235 / 6%) 0%, rgb(59 130 246 / 45%) 100%)",
|
||||
thumbIcon: "🚫",
|
||||
title: "Zero Data Collection",
|
||||
description: "No registration, no servers, no logs. Complete anonymity with instant channels."
|
||||
}
|
||||
];
|
||||
|
||||
const isMobile = () => window.matchMedia("(max-width:767px)").matches;
|
||||
|
||||
const center = React.useCallback((i) => {
|
||||
if (!trackRef.current || !wrapRef.current) return;
|
||||
const card = trackRef.current.children[i];
|
||||
if (!card) return;
|
||||
|
||||
const axis = isMobile() ? "top" : "left";
|
||||
const size = isMobile() ? "clientHeight" : "clientWidth";
|
||||
const start = isMobile() ? card.offsetTop : card.offsetLeft;
|
||||
|
||||
wrapRef.current.scrollTo({
|
||||
[axis]: start - (wrapRef.current[size] / 2 - card[size] / 2),
|
||||
behavior: "smooth"
|
||||
});
|
||||
}, []);
|
||||
|
||||
const activate = React.useCallback((i, scroll = false) => {
|
||||
if (i === current) return;
|
||||
setCurrent(i);
|
||||
if (scroll) {
|
||||
setTimeout(() => center(i), 50);
|
||||
}
|
||||
}, [current, center]);
|
||||
|
||||
const go = (step) => {
|
||||
const newIndex = Math.min(Math.max(current + step, 0), slides.length - 1);
|
||||
activate(newIndex, true);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
const handleKeydown = (e) => {
|
||||
if (["ArrowRight", "ArrowDown"].includes(e.key)) go(1);
|
||||
if (["ArrowLeft", "ArrowUp"].includes(e.key)) go(-1);
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", handleKeydown, { passive: true });
|
||||
return () => window.removeEventListener("keydown", handleKeydown);
|
||||
}, [current]);
|
||||
|
||||
React.useEffect(() => {
|
||||
center(current);
|
||||
}, [current, center]);
|
||||
|
||||
return React.createElement('section', { style: { background: 'transparent' } }, [
|
||||
// Header
|
||||
React.createElement('div', {
|
||||
key: 'head',
|
||||
className: 'head'
|
||||
}, [
|
||||
React.createElement('h2', { key: 'title' }, 'Why SecureBit.chat is unique'),
|
||||
React.createElement('div', {
|
||||
key: 'controls',
|
||||
className: 'controls'
|
||||
}, [
|
||||
React.createElement('button', {
|
||||
key: 'prev',
|
||||
id: 'prev-slider',
|
||||
className: 'nav-btn',
|
||||
'aria-label': 'Prev',
|
||||
disabled: current === 0,
|
||||
onClick: () => go(-1)
|
||||
}, '‹'),
|
||||
React.createElement('button', {
|
||||
key: 'next',
|
||||
id: 'next-slider',
|
||||
className: 'nav-btn',
|
||||
'aria-label': 'Next',
|
||||
disabled: current === slides.length - 1,
|
||||
onClick: () => go(1)
|
||||
}, '›')
|
||||
])
|
||||
]),
|
||||
|
||||
// Slider
|
||||
React.createElement('div', {
|
||||
key: 'slider',
|
||||
className: 'slider',
|
||||
ref: wrapRef
|
||||
},
|
||||
React.createElement('div', {
|
||||
className: 'track',
|
||||
ref: trackRef
|
||||
}, slides.map((slide, index) =>
|
||||
React.createElement('article', {
|
||||
key: index,
|
||||
className: 'project-card',
|
||||
...(index === current ? { active: '' } : {}),
|
||||
onMouseEnter: () => {
|
||||
if (window.matchMedia("(hover:hover)").matches) {
|
||||
activate(index, true);
|
||||
}
|
||||
},
|
||||
onClick: () => activate(index, true)
|
||||
}, [
|
||||
// Background
|
||||
React.createElement('div', {
|
||||
key: 'bg',
|
||||
className: 'project-card__bg',
|
||||
style: {
|
||||
background: slide.bgImage,
|
||||
backgroundSize: 'cover',
|
||||
backgroundPosition: 'center'
|
||||
}
|
||||
}),
|
||||
|
||||
// Content
|
||||
React.createElement('div', {
|
||||
key: 'content',
|
||||
className: 'project-card__content'
|
||||
}, [
|
||||
// Text container
|
||||
React.createElement('div', { key: 'text' }, [
|
||||
React.createElement('h3', {
|
||||
key: 'title',
|
||||
className: 'project-card__title'
|
||||
}, slide.title),
|
||||
React.createElement('p', {
|
||||
key: 'desc',
|
||||
className: 'project-card__desc'
|
||||
}, slide.description)
|
||||
])
|
||||
])
|
||||
])
|
||||
))
|
||||
),
|
||||
|
||||
// Dots
|
||||
React.createElement('div', {
|
||||
key: 'dots',
|
||||
className: 'dots',
|
||||
ref: dotsRef,
|
||||
...(isMobile() ? { hidden: true } : {})
|
||||
}, slides.map((_, index) =>
|
||||
React.createElement('span', {
|
||||
key: index,
|
||||
className: `dot ${index === current ? 'active' : ''}`,
|
||||
onClick: () => activate(index, true)
|
||||
})
|
||||
))
|
||||
]);
|
||||
};
|
||||
|
||||
// Export for use in your app
|
||||
window.UniqueFeatureSlider = UniqueFeatureSlider;
|
||||
Reference in New Issue
Block a user