SecureBitChat/securebit-chat
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Update slider UX/UI

Browse Source
This commit is contained in:
lockbitchat
2025-10-02 21:34:45 -04:00
parent 4359e5fab1
commit 8cd78a2aba
6 changed files with 672 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files

356
src/components/ui/UniqueFeatureSlider.jsx
View File

@@ -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;

336
src/styles/main.css
View File

@@ -167,3 +167,339 @@ tr.bg-black-table {
border-radius: 10px;
z-index: 1;
}
:root {
--gap: 1.25rem;
--speed: 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--closed: 5rem;
--open: 30rem;
--accent: #fb923c;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Inter, sans-serif;
background: #07090d;
color: #c5c7ce;
}
.head {
max-width: 1400px;
margin: auto;
padding: 70px 20px 40px;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
}
.head h2 {
font: 400 1.5rem/1.2 Inter, sans-serif;
color: #fff;
}
@media (min-width: 1024px) {
.head h2 {
font-size: 2.25rem;
}
}
.nav-btn {
width: 2.5rem;
height: 2.5rem;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.12);
color: #fff;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: 0.3s;
}
.nav-btn:hover {
background: var(--accent);
}
.nav-btn:disabled {
opacity: 0.3;
cursor: default;
}
.slider {
max-width: 1400px;
margin: auto;
overflow: hidden;
}
.controls {
display: flex;
flex-direction: row;
gap: 0.5rem;
}
.track {
display: flex;
gap: var(--gap);
align-items: flex-start;
justify-content: center;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
padding-bottom: 40px;
}
.track::-webkit-scrollbar {
display: none;
}
.project-card {
position: relative;
flex: 0 0 var(--closed);
height: 26rem;
border-radius: 1rem;
overflow: hidden;
cursor: pointer;
transition: flex-basis var(--speed), transform var(--speed);
}
.project-card[active] {
flex-basis: var(--open);
transform: translateY(-6px);
box-shadow: 0 15px 12px rgba(0, 0, 0, 0.25);
}
.project-card__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: brightness(0.75) saturate(75%);
transition: filter 0.3s, transform var(--speed);
}
.project-card:hover .project-card__bg {
filter: brightness(0.9) saturate(100%);
transform: scale(1.06);
}
.project-card__content {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.7rem;
padding: 0;
background: linear-gradient(transparent 40%, rgba(0, 0, 0, 0.85) 100%);
z-index: 2;
}
.project-card__title {
color: #fff;
font-weight: 700;
font-size: 1.35rem;
writing-mode: vertical-rl;
transform: rotate(180deg);
}
.project-card__thumb,
.project-card__desc,
.project-card__btn {
display: none;
}
.project-card[active] .project-card__content {
flex-direction: row;
align-items: center;
padding: 1.2rem 2rem;
gap: 1.1rem;
}
.project-card[active] .project-card__title {
writing-mode: horizontal-tb;
transform: none;
font-size: 2.4rem;
}
.project-card[active] .project-card__thumb,
.project-card[active] .project-card__desc,
.project-card[active] .project-card__btn {
display: block;
}
.project-card__thumb {
width: 133px;
height: 269px;
border-radius: 0.45rem;
object-fit: cover;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.project-card__desc {
color: #ddd;
font-size: 1rem;
line-height: 1.4;
max-width: 16rem;
}
.project-card__btn {
padding: 0.55rem 1.3rem;
border: none;
border-radius: 9999px;
background: var(--accent);
color: #fff;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
}
.project-card__btn:hover {
background: #ff824f;
}
.dots {
display: flex;
gap: 0.5rem;
justify-content: center;
padding: 20px 0;
}
.dot {
width: 13px;
height: 13px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
cursor: pointer;
transition: 0.3s;
}
.dot.active {
background: var(--accent);
transform: scale(1.2);
}
@media (max-width: 767px) {
:root {
--closed: 4rem;
--open: 22rem;
}
.head {
padding: 50px 20px 30px;
}
.track {
flex-direction: column;
scroll-snap-type: y mandatory;
align-items: center;
justify-content: flex-start;
padding-bottom: 0;
}
.project-card {
height: 20rem;
}
.project-card__title {
font-size: 1.1rem;
writing-mode: horizontal-tb;
transform: none;
text-align: center;
padding-inline: 0.3rem;
}
.nav-btn {
width: 2rem;
height: 2rem;
font-size: 1.2rem;
}
}
@media (max-width: 767px) {
:root {
--closed: 100%;
--open: 100%;
--gap: 0.8rem;
}
.head {
padding: 30px 15px 20px;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.slider {
padding: 0 15px;
}
.track {
flex-direction: column;
scroll-snap-type: y mandatory;
gap: 0.8rem;
padding-bottom: 20px;
}
.project-card {
height: auto;
min-height: 80px;
flex: 0 0 auto;
width: 100%;
scroll-snap-align: start;
}
.project-card[active] {
min-height: 300px;
transform: none;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}
.project-card__content {
flex-direction: row;
justify-content: flex-start;
padding: 1rem;
align-items: center;
gap: 1rem;
}
.project-card__title {
writing-mode: horizontal-tb;
transform: none;
font-size: 1.2rem;
margin-right: auto;
}
.project-card__thumb,
.project-card__desc,
.project-card__btn {
display: none;
}
.project-card[active] .project-card__content {
align-items: flex-start;
padding: 1.5rem;
}
.project-card[active] .project-card__title {
font-size: 1.8rem;
margin-bottom: 1rem;
margin-top: 2rem;
}
.project-card[active] .project-card__thumb {
width: 200px;
height: 267px;
border-radius: 0.35rem;
margin-bottom: 1rem;
}
.project-card[active] .project-card__desc {
font-size: 0.95rem;
max-width: 100%;
margin-bottom: 1rem;
}
.project-card[active] .project-card__btn {
align-self: center;
width: 100%;
text-align: center;
padding: 0.7rem;
}
.dots {
display: none;
}
.controls {
width: 100%;
justify-content: space-between;
padding: 0 15px 20px;
}
.nav-btn {
position: static;
transform: none;
}
}