diff --git a/index.html b/index.html index eb1f947..5411497 100644 --- a/index.html +++ b/index.html @@ -98,702 +98,557 @@ // Slider Component const UniqueFeatureSlider = () => { - const [currentSlide, setCurrentSlide] = React.useState(0); + const [currentSlide, setCurrentSlide] = React.useState(0); - const slides = [ - { - icon: "fas fa-shield-halved", - color: "orange", - title: "Military-grade encryption", - description: "ECDH P-384 + AES-GCM 256-bit + ECDSA digital signatures provide NSA Suite B–level cryptographic strength" - }, - { - icon: "fas fa-sync-alt", - color: "purple", - title: "Perfect Forward Secrecy", - description: "Automatic key rotation every 5 minutes ensures that even if one key is compromised, all other messages remain secure." - }, - { - icon: "fas fa-user-shield", - color: "green", - title: "Protection against MITM attacks", - description: "Out-of-band verification with security codes plus mutual authentication eliminate the possibility of man-in-the-middle attacks." - }, - { - icon: "fas fa-bolt", - color: "yellow", - title: "Lightning payments", - description: "Session payments in satoshis via Lightning Network. Payment privacy plus instant microtransactions without banks." - }, - { - icon: "fas fa-eye-slash", - color: "blue", - title: "Zero data storage", - description: "All messages exist only in the browser’s memory. No servers, logs, or databases. Complete anonymity." - }, - { - icon: "fas fa-code", - color: "cyan", - title: "Open Source security", - description: "All code is open for audit. Cryptography runs directly in the browser without relying on servers or third parties." - } - ]; + const slides = [ + { + icon: "fas fa-shield-halved", + color: "orange", + title: "12-Layer Military Security", + description: "Revolutionary defense system with ECDH P-384 + AES-GCM 256 + ECDSA. Enhanced Security Edition v4.0 provides military-grade protection exceeding government standards." + }, + { + icon: "fas fa-bolt", + color: "yellow", + title: "Lightning Network Payments", + description: "First messenger with Lightning Network integration. Pay-per-session with satoshis via WebLN. Sustainable economic model without ads or data harvesting." + }, + { + 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); + 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); - }, []); + React.useEffect(() => { + const timer = setInterval(() => { + nextSlide(); + }, 15000); + return () => clearInterval(timer); + }, []); - return ( -
-
-

- Why LockBit.chat is unique -

-

- The only messenger with military-grade cryptography and Lightning payments -

-
+ 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 LockBit.chat is unique'), + React.createElement('p', { + key: 'subtitle', + className: "text-secondary max-w-2xl mx-auto" + }, 'The only messenger with military-grade cryptography and Lightning payments') + ]), -
-
-
- {slides.map((slide, index) => ( -
-
- {/* Background icon */} - + 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 */} -

- {slide.title} -

-

- {slide.description} -

-
-
- ))} -
-
+ // 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-4 bg-orange-500 rounded-full' + : 'w-4 h-4 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) + ]) + )) + ]); +}; - {/* Navigation */} - - -
- {/* Dots */} -
- {slides.map((_, index) => ( - - ))} -
-
- ); - }; const ComparisonTable = () => { const [selectedFeature, setSelectedFeature] = React.useState(null); const messengers = [ { - name: "LockBit.chat", - logo: React.createElement('div', { - className: "w-8 h-8 bg-orange-500/10 border border-orange-500/20 rounded-lg flex items-center justify-center" - }, [ - React.createElement('i', { - key: 'icon', - className: 'fas fa-shield-halved text-orange-400' - }) - ]), - type: "P2P WebRTC", - color: "orange" + name: "LockBit.chat", + logo:
+ +
, + type: "P2P WebRTC", + version: "v4.0 Enhanced", + color: "orange", }, { - name: "Signal", - logo: React.createElement('svg', { - key: 'signal-logo', - className: "w-8 h-8", - viewBox: "0 0 122.88 122.31", - xmlns: "http://www.w3.org/2000/svg" - }, [ - React.createElement('path', { - key: 'bg', - className: "fill-blue-500", - d: "M27.75,0H95.13a27.83,27.83,0,0,1,27.75,27.75V94.57a27.83,27.83,0,0,1-27.75,27.74H27.75A27.83,27.83,0,0,1,0,94.57V27.75A27.83,27.83,0,0,1,27.75,0Z" - }), - React.createElement('path', { - key: 'icon', - className: "fill-white", - d: "M61.44,25.39A35.76,35.76,0,0,0,31.18,80.18L27.74,94.86l14.67-3.44a35.77,35.77,0,1,0,19-66Z" - }) - ]), - type: "Centralized", - color: "blue" + name: "Signal", + logo: ( + + + + + ), + type: "Centralized", + version: "Latest", + color: "blue", }, { - name: "Threema", - logo: React.createElement('svg', { - key: 'threema-logo', - className: "w-8 h-8", - viewBox: "0 0 122.88 122.88", - xmlns: "http://www.w3.org/2000/svg" - }, [ - React.createElement('rect', { - key: 'bg', - width: "122.88", - height: "122.88", - rx: "18.43", - fill: "#474747" - }), - React.createElement('path', { - key: 'bubble', - fill: "#FFFFFF", - d: "M44.26,78.48l-19.44,4.8l4.08-16.56c-4.08-5.28-6.48-12-6.48-18.96c0-18.96,17.52-34.32,39.12-34.32 c21.6,0,39.12,15.36,39.12,34.32c0,18.96-17.52,34.32-39.12,34.32c-6,0-12-1.2-17.04-3.36L44.26,78.48z M50.26,44.64 h-0.48c-0.96,0-1.68,0.72-1.44,1.68v15.6c0,0.96,0.72,1.68,1.68,1.68l23.04,0c0.96,0,1.68-0.72,1.68-1.68v-15.6 c0-0.96-0.72-1.68-1.68-1.68h-0.48v-4.32c0-6-5.04-11.04-11.04-11.04S50.5,34.32,50.5,40.32v4.32H50.26z M68.02,44.64 h-13.2v-4.32c0-3.6,2.88-6.72,6.72-6.72c3.6,0,6.72,2.88,6.72,6.72v4.32H68.02z" - }), - React.createElement('circle', { - key: 'dot1', - cx: "37.44", - cy: "97.44", - r: "6.72", - fill: "#3fe669" - }), - React.createElement('circle', { - key: 'dot2', - cx: "61.44", - cy: "97.44", - r: "6.72", - fill: "#3fe669" - }), - React.createElement('circle', { - key: 'dot3', - cx: "85.44", - cy: "97.44", - r: "6.72", - fill: "#3fe669" - }) - ]), - type: "Centralized", - color: "green" + name: "Threema", + logo: ( + + + + + + + + ), + type: "Centralized", + version: "Latest", + color: "green", }, { - name: "Olvid", - logo: React.createElement('svg', { - key: 'olvid-logo', - className: "w-8 h-8", - viewBox: "0 0 128 128", - xmlns: "http://www.w3.org/2000/svg" - }, [ - React.createElement('g', { - key: 'group', - transform: "translate(0,128) scale(0.1,-0.1)", - fill: "#0a4bd1", - stroke: "none" - }, [ - React.createElement('path', { - key: 'p1', - d: "M262 1264 c-139 -37 -217 -120 -247 -260 -18 -85 -21 -627 -4 -720 21 -115 89 -201 198 -253 l56 -26 370 0 c284 0 379 3 410 13 108 37 203 140 225 247 7 36 10 169 8 402 -4 396 -6 405 -85 493 -50 55 -100 86 -178 106 -73 20 -679 18 -753 -2z m538 -215 c299 -105 388 -490 165 -714 -216 -216 -598 -152 -728 122 -30 64 -32 74 -32 183 0 114 1 117 38 192 99 201 337 294 557 217z" - }), - React.createElement('path', { - key: 'p2', - d: "M550 864 c-46 -20 -87 -59 -113 -109 -17 -31 -22 -58 -22 -115 0 -85 15 -122 72 -182 20 -20 32 -41 28 -47 -3 -6 -30 -25 -58 -41 l-52 -30 70 0 c137 0 262 46 329 120 51 57 69 103 69 181 0 106 -51 188 -140 226 -43 17 -139 16 -183 -3z" - }) - ]) - ]), - type: "Centralized", - color: "purple" - } - , - { - name: "Session", - logo: React.createElement('svg', { - key: 'olvid-logo', - className: "w-8 h-8", - viewBox: "0 0 1024 1024", - xmlns: "http://www.w3.org/2000/svg" - }, [ - React.createElement('rect', { - key: 'bg', - width: "1024", - height: "1024", - fill: "#333132" - }), - React.createElement('path', { - key: 'icon', - fill: "#00f782", - d: "M431 574.8c-.8-7.4-6.7-8.2-10.8-10.6-13.6-7.9-27.5-15.4-41.3-23l-22.5-12.3c-8.5-4.7-17.1-9.2-25.6-14.1-10.5-6-21-11.9-31.1-18.6-18.9-12.5-33.8-29.1-46.3-48.1-8.3-12.6-14.8-26.1-19.2-40.4-6.7-21.7-10.8-44.1-7.8-66.8 1.8-14 4.6-28 9.7-41.6 7.8-20.8 19.3-38.8 34.2-54.8 9.8-10.6 21.2-19.1 33.4-26.8 14.7-9.3 30.7-15.4 47.4-19 13.8-3 28.1-4.3 42.2-4.4 89.9-.4 179.7-.3 269.6 0 12.6 0 25.5 1 37.7 4.1 24.3 6.2 45.7 18.2 63 37 11.2 12.2 20.4 25.8 25.8 41.2 7.3 20.7 12.3 42.1 6.7 64.4-2.1 8.5-2.7 17.5-6.1 25.4-4.7 10.9-10.8 21.2-17.2 31.2-8.7 13.5-20.5 24.3-34.4 32.2-10.1 5.7-21 10.2-32 14.3-18.1 6.7-37.2 5-56.1 5.2-17.2.2-34.5 0-51.7.1-1.7 0-3.4 1.2-5.1 1.9 1.3 1.8 2.1 4.3 3.9 5.3 13.5 7.8 27.2 15.4 40.8 22.9 11 6 22.3 11.7 33.2 17.9 15.2 8.5 30.2 17.4 45.3 26.1 19.3 11.1 34.8 26.4 47.8 44.3 9.7 13.3 17.2 27.9 23 43.5 6.1 16.6 9.2 33.8 10.4 51.3.6 9.1-.7 18.5-1.9 27.6-1.2 9.1-2.7 18.4-5.6 27.1-3.3 10.2-7.4 20.2-12.4 29.6-8.4 15.7-19.6 29.4-32.8 41.4-12.7 11.5-26.8 20.6-42.4 27.6-22.9 10.3-46.9 14.4-71.6 14.5-89.7.3-179.4.2-269.1-.1-12.6 0-25.5-1-37.7-3.9-24.5-5.7-45.8-18-63.3-36.4-11.6-12.3-20.2-26.5-26.6-41.9-2.7-6.4-4.1-13.5-5.4-20.4-1.5-8.1-2.8-16.3-3.1-24.5-.6-15.7 2.8-30.9 8.2-45.4 8.2-22 21.7-40.6 40.2-55.2 10-7.9 21.3-13.7 33.1-18.8 16.6-7.2 34-8.1 51.4-8.5 21.9-.5 43.9-.1 65.9-.1 1.9-.1 3.9-.3 6.2-.4zm96.3-342.4c0 .1 0 .1 0 0-48.3.1-96.6-.6-144.9.5-13.5.3-27.4 3.9-40.1 8.7-14.9 5.6-28.1 14.6-39.9 25.8-20.2 19-32.2 42.2-37.2 68.9-3.6 19-1.4 38.1 4.1 56.5 4.1 13.7 10.5 26.4 18.5 38.4 14.8 22.2 35.7 36.7 58.4 49.2 11 6.1 22.2 11.9 33.2 18 13.5 7.5 26.9 15.1 40.4 22.6 13.1 7.3 26.2 14.5 39.2 21.7 9.7 5.3 19.4 10.7 29.1 16.1 2.9 1.6 4.1.2 4.5-2.4.3-2 .3-4 .3-6.1v-58.8c0-19.9.1-39.9 0-59.8 0-6.6 1.7-12.8 7.6-16.1 3.5-2 8.2-2.8 12.4-2.8 50.3-.2 100.7-.2 151-.1 19.8 0 38.3-4.4 55.1-15.1 23.1-14.8 36.3-36.3 40.6-62.9 3.4-20.8-1-40.9-12.4-58.5-17.8-27.5-43.6-43-76.5-43.6-47.8-.8-95.6-.2-143.4-.2zm-30.6 559.7c45.1 0 90.2-.2 135.3.1 18.9.1 36.6-3.9 53.9-11.1 18.4-7.7 33.6-19.8 46.3-34.9 9.1-10.8 16.2-22.9 20.8-36.5 4.2-12.4 7.4-24.7 7.3-37.9-.1-10.3.2-20.5-3.4-30.5-2.6-7.2-3.4-15.2-6.4-22.1-3.9-8.9-8.9-17.3-14-25.5-12.9-20.8-31.9-34.7-52.8-46.4-10.6-5.9-21.2-11.6-31.8-17.5-10.3-5.7-20.4-11.7-30.7-17.4-11.2-6.1-22.5-11.9-33.7-18-16.6-9.1-33.1-18.4-49.8-27.5-4.9-2.7-6.1-1.9-6.4 3.9-.1 2-.1 4.1-.1 6.1v114.5c0 14.8-5.6 20.4-20.4 20.4-47.6.1-95.3-.1-142.9.2-10.5.1-21.1 1.4-31.6 2.8-16.5 2.2-30.5 9.9-42.8 21-17 15.5-27 34.7-29.4 57.5-1.1 10.9-.4 21.7 2.9 32.5 3.7 12.3 9.2 23.4 17.5 33 19.2 22.1 43.4 33.3 72.7 33.3 46.6.1 93 0 139.5 0z" - }) - ]), - type: "Onion Network", - color: "cyan" - } + name: "Session", + logo: ( + + + + + ), + type: "Onion Network", + version: "Latest", + color: "cyan", + }, ]; const features = [ + { + name: "Security Architecture", + lockbit: { status: "🏆", detail: "12-layer military-grade defense system" }, + signal: { status: "✅", detail: "Signal Protocol with double ratchet" }, + threema: { status: "✅", detail: "Standard security implementation" }, + session: { status: "✅", detail: "Modified Signal Protocol + Onion routing" }, + }, { name: "Cryptography", - lockbit: { status: "🏆", detail: "ECDH P-384 + AES-GCM 256 + ECDSA" }, + lockbit: { status: "🏆", detail: "ECDH P-384 + AES-GCM 256 + ECDSA P-384" }, signal: { status: "✅", detail: "Signal Protocol + Double Ratchet" }, threema: { status: "✅", detail: "NaCl + XSalsa20 + Poly1305" }, - olvid: { status: "✅", detail: "OlvidEngine + post-quantum" }, - session: { status: "✅", detail: "Modified Signal Protocol" } + session: { status: "✅", detail: "Modified Signal Protocol" }, }, { name: "Perfect Forward Secrecy", - lockbit: { status: "🏆", detail: "Automatic rotation every 5 minutes" }, + lockbit: { status: "🏆", detail: "Auto rotation every 5 minutes or 100 messages" }, signal: { status: "✅", detail: "Double Ratchet algorithm" }, threema: { status: "⚠️", detail: "Partial (group chats)" }, - olvid: { status: "✅", detail: "Full PFS for all messages" }, - session: { status: "✅", detail: "Session Ratchet algorithm" } + session: { status: "✅", detail: "Session Ratchet algorithm" }, }, { name: "Architecture", - lockbit: { status: "🏆", detail: "Pure P2P without servers" }, + lockbit: { status: "🏆", detail: "Pure P2P WebRTC without servers" }, signal: { status: "❌", detail: "Centralized Signal servers" }, threema: { status: "❌", detail: "Threema servers in Switzerland" }, - olvid: { status: "❌", detail: "Servers in France" }, - session: { status: "⚠️", detail: "Onion routing via network nodes" } + session: { status: "⚠️", detail: "Onion routing via network nodes" }, }, { name: "Registration Anonymity", - lockbit: { status: "🏆", detail: "No registration required" }, + lockbit: { status: "🏆", detail: "No registration required, instant anonymous channels" }, signal: { status: "❌", detail: "Phone number required" }, threema: { status: "✅", detail: "ID generated locally" }, - olvid: { status: "✅", detail: "Cryptographic identity" }, - session: { status: "✅", detail: "Random session ID" } + session: { status: "✅", detail: "Random session ID" }, + }, + { + name: "Payment Integration", + lockbit: { status: "🏆", detail: "Lightning Network satoshis per session + WebLN" }, + signal: { status: "❌", detail: "No payment system" }, + threema: { status: "❌", detail: "No payment system" }, + session: { status: "❌", detail: "No payment system" }, }, { name: "Metadata Protection", - lockbit: { status: "🏆", detail: "Full metadata encryption" }, + lockbit: { status: "🏆", detail: "Full metadata encryption + traffic obfuscation" }, signal: { status: "⚠️", detail: "Sealed Sender (partial)" }, threema: { status: "⚠️", detail: "Minimal metadata" }, - olvid: { status: "✅", detail: "Protection via obfuscation" }, - session: { status: "✅", detail: "Onion routing hides metadata" } + session: { status: "✅", detail: "Onion routing hides metadata" }, + }, + { + name: "Traffic Obfuscation", + lockbit: { status: "🏆", detail: "Fake traffic + pattern masking + packet padding" }, + signal: { status: "❌", detail: "No traffic obfuscation" }, + threema: { status: "❌", detail: "No traffic obfuscation" }, + session: { status: "✅", detail: "Onion routing provides obfuscation" }, }, { name: "Open Source", - lockbit: { status: "🏆", detail: "100% open and auditable" }, + lockbit: { status: "🏆", detail: "100% open + auditable + MIT license" }, signal: { status: "✅", detail: "Fully open" }, threema: { status: "⚠️", detail: "Only clients open" }, - olvid: { status: "✅", detail: "Fully open" }, - session: { status: "✅", detail: "Fully open" } + session: { status: "✅", detail: "Fully open" }, }, { - name: "Digital Signatures", - lockbit: { status: "🏆", detail: "Built-in ECDSA P-384" }, - signal: { status: "✅", detail: "Ed25519 signatures" }, - threema: { status: "✅", detail: "Ed25519 signatures" }, - olvid: { status: "✅", detail: "Multiple algorithms" }, - session: { status: "✅", detail: "Ed25519 signatures" } + name: "MITM Protection", + lockbit: { status: "🏆", detail: "Out-of-band verification + mutual auth + ECDSA" }, + signal: { status: "✅", detail: "Safety numbers verification" }, + threema: { status: "✅", detail: "QR code scanning" }, + session: { status: "⚠️", detail: "Basic key verification" }, }, { name: "Economic Model", - lockbit: { status: "🏆", detail: "Lightning satoshis per session" }, - signal: { status: "⚠️", detail: "Donations and grants" }, + lockbit: { status: "🏆", detail: "Sustainable pay-per-session model" }, + signal: { status: "⚠️", detail: "Donations and grants dependency" }, threema: { status: "✅", detail: "One-time app purchase" }, - olvid: { status: "✅", detail: "Free + Enterprise" }, - session: { status: "⚠️", detail: "Donations" } + session: { status: "⚠️", detail: "Donations dependency" }, }, { name: "Censorship Resistance", - lockbit: { status: "🏆", detail: "Impossible to block P2P" }, + lockbit: { status: "🏆", detail: "Impossible to block P2P + no servers to target" }, signal: { status: "⚠️", detail: "Blocked in authoritarian countries" }, threema: { status: "⚠️", detail: "May be blocked" }, - olvid: { status: "⚠️", detail: "May be blocked" }, - session: { status: "✅", detail: "Onion routing bypasses blocks" } + session: { status: "✅", detail: "Onion routing bypasses blocks" }, }, { name: "Data Storage", - lockbit: { status: "🏆", detail: "Only in browser memory" }, - signal: { status: "⚠️", detail: "Local database" }, + lockbit: { status: "🏆", detail: "Zero data storage - only in browser memory" }, + signal: { status: "⚠️", detail: "Local database storage" }, threema: { status: "⚠️", detail: "Local + optional backup" }, - olvid: { status: "✅", detail: "Local without cloud backup" }, - session: { status: "⚠️", detail: "Local database" } + session: { status: "⚠️", detail: "Local database storage" }, }, { - name: "Post-Quantum Protection", - lockbit: { status: "⚠️", detail: "Planned in version 5.0" }, + name: "Key Security", + lockbit: { status: "🏆", detail: "Non-extractable keys + hardware protection" }, + signal: { status: "✅", detail: "Secure key storage" }, + threema: { status: "✅", detail: "Local key storage" }, + session: { status: "✅", detail: "Secure key storage" }, + }, + { + name: "Post-Quantum Roadmap", + lockbit: { status: "✅", detail: "Planned v5.0 - CRYSTALS-Kyber/Dilithium" }, signal: { status: "⚠️", detail: "PQXDH in development" }, - threema: { status: "❌", detail: "Not implemented" }, - olvid: { status: "🏆", detail: "Already implemented" }, - session: { status: "❌", detail: "Not implemented" } + threema: { status: "❌", detail: "Not announced" }, + session: { status: "❌", detail: "Not announced" }, }, - { - name: "MITM Verification", - lockbit: { status: "🏆", detail: "Out-of-band codes + mutual auth" }, - signal: { status: "✅", detail: "Safety numbers" }, - threema: { status: "✅", detail: "QR code scanning" }, - olvid: { status: "✅", detail: "SAS verification" }, - session: { status: "⚠️", detail: "Basic key verification" } - } ]; const getStatusIcon = (status) => { - switch (status) { - case "🏆": return { icon: status, color: "text-yellow-400" }; - case "✅": return { icon: status, color: "text-green-400" }; - case "⚠️": return { icon: status, color: "text-yellow-400" }; - case "❌": return { icon: status, color: "text-red-400" }; - default: return { icon: status, color: "text-gray-400" }; - } + const statusMap = { + "🏆": { icon: "🏆", color: "text-yellow-400" }, + "✅": { icon: "✅", color: "text-green-400" }, + "⚠️": { icon: "⚠️", color: "text-yellow-400" }, + "❌": { icon: "❌", color: "text-red-400" }, + }; + return statusMap[status] || { icon: status, color: "text-gray-400" }; }; const toggleFeatureDetail = (index) => { setSelectedFeature(selectedFeature === index ? null : index); }; - return React.createElement('div', { - key: 'comparison-section', - className: "mt-16" - }, [ - React.createElement('div', { - key: 'section-header', - className: "text-center mb-8" - }, [ - React.createElement('h3', { - key: 'title', - className: "text-2xl font-semibold text-primary mb-3" - }, 'Comparison with privacy leaders'), - React.createElement('p', { - key: 'subtitle', - className: "text-secondary max-w-2xl mx-auto mb-4" - }, "A detailed comparison with the world’s most secure messengers"), - React.createElement('div', { - key: 'trophy-note', - className: "inline-flex items-center px-4 py-2 bg-yellow-500/10 border border-yellow-500/20 rounded-lg" - }, [ - React.createElement('span', { - key: 'trophy', - className: "text-yellow-400 mr-2" - }, "🏆"), - React.createElement('span', { - key: 'text', - className: "text-yellow-300 text-sm font-medium" - }, "Leader in the category") - ]) - ]), + return ( +
+ {/* Title */} +
+

+ Enhanced Security Edition Comparison +

+

+ LockBit.chat v4.0 Enhanced Security Edition vs leading secure messengers +

+
+ 🏆 + + Category Leader - Military-Grade Security + +
+
- React.createElement('div', { - key: 'table-container', - className: "max-w-7xl mx-auto" - }, [ - // Mobile warning - React.createElement('div', { - key: 'mobile-warning', - className: "md:hidden p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg mb-4" - }, [ - React.createElement('p', { - className: "text-yellow-400 text-sm text-center" - }, "💡 Please rotate your device horizontally for better viewing.") - ]), + {/* Table container */} +
+ {/* Mobile Alert */} +
+

+ 💡 Rotate your device horizontally for better viewing +

+
- // Table - React.createElement('div', { - key: 'table-wrapper', - className: "overflow-x-auto custom-scrollbar" - }, [ - React.createElement('table', { - key: 'comparison-table', - className: "w-full border-collapse rounded-xl overflow-hidden", - style: { backgroundColor: "rgba(42, 43, 42, 0.8)" } - }, [ - // Header - React.createElement('thead', { - key: 'table-head' - }, [ - React.createElement('tr', { - key: 'header-row', - className: "bg-header" - }, [ - React.createElement('th', { - key: 'feature-header', - className: "text-left p-4 border-b border-gray-600 text-primary font-semibold min-w-[220px]" - }, 'Security criterion'), - ...messengers.map((messenger, index) => - React.createElement('th', { - key: `messenger-${index}`, - className: "text-center p-4 border-b border-gray-600 min-w-[140px]" - }, [ - React.createElement('div', { - key: 'messenger-info', - className: "flex flex-col items-center" - }, [ - React.createElement('div', { - key: 'logo', - className: "mb-2" - }, messenger.logo), - React.createElement('div', { - key: 'name', - className: `text-sm font-semibold ${ - messenger.color === 'orange' ? 'text-orange-400' : - messenger.color === 'blue' ? 'text-blue-400' : - messenger.color === 'green' ? 'text-green-400' : - messenger.color === 'purple' ? 'text-purple-400' : - 'text-cyan-400' - }` - }, messenger.name), - React.createElement('div', { - key: 'type', - className: "text-xs text-gray-400" - }, messenger.type) - ]) - ]) - ) - ]) - ]), + {/* Table */} +
+ + {/* Table Header */} + + + + {messengers.map((messenger, index) => ( + + ))} + + - // Body - React.createElement('tbody', { - key: 'table-body' - }, features.map((feature, featureIndex) => [ - React.createElement('tr', { - key: `feature-${featureIndex}`, - className: `border-b border-gray-700/30 hover:bg-gray-800/20 transition-colors cursor-pointer ${ - selectedFeature === featureIndex ? 'bg-gray-800/40' : '' - }`, - onClick: () => toggleFeatureDetail(featureIndex) - }, [ - React.createElement('td', { - key: 'feature-name', - className: "p-4 text-primary font-medium" - }, [ - React.createElement('div', { - key: 'feature-text', - className: "flex items-center justify-between" - }, [ - React.createElement('span', { - key: 'name' - }, feature.name), - React.createElement('i', { - key: 'expand-icon', - className: `fas fa-chevron-${selectedFeature === featureIndex ? 'up' : 'down'} text-xs text-gray-400 opacity-50` - }) - ]) - ]), - React.createElement('td', { - key: 'lockbit-cell', - className: "p-4 text-center" - }, [ - React.createElement('span', { - key: 'lockbit-status', - className: getStatusIcon(feature.lockbit.status).color + " text-xl" - }, getStatusIcon(feature.lockbit.status).icon) - ]), - React.createElement('td', { - key: 'signal-cell', - className: "p-4 text-center" - }, [ - React.createElement('span', { - key: 'signal-status', - className: getStatusIcon(feature.signal.status).color + " text-xl" - }, getStatusIcon(feature.signal.status).icon) - ]), - React.createElement('td', { - key: 'threema-cell', - className: "p-4 text-center" - }, [ - React.createElement('span', { - key: 'threema-status', - className: getStatusIcon(feature.threema.status).color + " text-xl" - }, getStatusIcon(feature.threema.status).icon) - ]), - React.createElement('td', { - key: 'olvid-cell', - className: "p-4 text-center" - }, [ - React.createElement('span', { - key: 'olvid-status', - className: getStatusIcon(feature.olvid.status).color + " text-xl" - }, getStatusIcon(feature.olvid.status).icon) - ]), - React.createElement('td', { - key: 'session-cell', - className: "p-4 text-center" - }, [ - React.createElement('span', { - key: 'session-status', - className: getStatusIcon(feature.session.status).color + " text-xl" - }, getStatusIcon(feature.session.status).icon) - ]) - ]), + {/* Table body*/} + + {features.map((feature, featureIndex) => ( + + toggleFeatureDetail(featureIndex)} + > + + + + + + - // Expanded details row - selectedFeature === featureIndex && React.createElement('tr', { - key: `details-${featureIndex}`, - className: "border-b border-gray-700/30 bg-gray-800/10" - }, [ - React.createElement('td', { - key: 'details-spacer', - className: "p-4 text-xs text-gray-400" - }, "Детали:"), - React.createElement('td', { - key: 'lockbit-detail', - className: "p-4 text-center" - }, [ - React.createElement('div', { - key: 'detail', - className: "text-xs text-orange-300 font-medium leading-relaxed" - }, feature.lockbit.detail) - ]), - React.createElement('td', { - key: 'signal-detail', - className: "p-4 text-center" - }, [ - React.createElement('div', { - key: 'detail', - className: "text-xs text-blue-300 leading-relaxed" - }, feature.signal.detail) - ]), - React.createElement('td', { - key: 'threema-detail', - className: "p-4 text-center" - }, [ - React.createElement('div', { - key: 'detail', - className: "text-xs text-green-300 leading-relaxed" - }, feature.threema.detail) - ]), - React.createElement('td', { - key: 'olvid-detail', - className: "p-4 text-center" - }, [ - React.createElement('div', { - key: 'detail', - className: "text-xs text-purple-300 leading-relaxed" - }, feature.olvid.detail) - ]), - React.createElement('td', { - key: 'session-detail', - className: "p-4 text-center" - }, [ - React.createElement('div', { - key: 'detail', - className: "text-xs text-cyan-300 leading-relaxed" - }, feature.session.detail) - ]) - ]) - ]).flat()) - ]) - ]) - ]), + {/* Details */} + {selectedFeature === featureIndex && ( + + + + + + + + )} + + ))} + +
+ Security Criterion + +
+
{messenger.logo}
+
+ {messenger.name} +
+
{messenger.type}
+
{messenger.version}
+
+
+
+ {feature.name} + +
+ 		+ + {getStatusIcon(feature.lockbit.status).icon} + + + + {getStatusIcon(feature.signal.status).icon} + + + + {getStatusIcon(feature.threema.status).icon} + + + + {getStatusIcon(feature.session.status).icon} + +
Technical Details: +
+ {feature.lockbit.detail} +
+ 		+
+ {feature.signal.detail} +
+ 		+
+ {feature.threema.detail} +
+ 		+
+ {feature.session.detail} +
+
+
- // Enhanced Legend - React.createElement('div', { - key: 'legend', - className: "mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-4xl mx-auto" - }, [ - React.createElement('div', { - key: 'legend-item-1', - className: "flex items-center justify-center p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg" - }, [ - React.createElement('span', { - key: 'icon1', - className: "text-yellow-400 mr-2 text-lg" - }, "🏆"), - React.createElement('span', { - key: 'text1', - className: "text-yellow-300 text-sm font-medium" - }, "Leader") - ]), - React.createElement('div', { - key: 'legend-item-2', - className: "flex items-center justify-center p-3 bg-green-500/10 border border-green-500/20 rounded-lg" - }, [ - React.createElement('span', { - key: 'icon2', - className: "text-green-400 mr-2 text-lg" - }, "✅"), - React.createElement('span', { - key: 'text2', - className: "text-green-300 text-sm font-medium" - }, "Excellent") - ]), - React.createElement('div', { - key: 'legend-item-3', - className: "flex items-center justify-center p-3 bg-yellow-500/10 border border-yellow-500/20 rounded-lg" - }, [ - React.createElement('span', { - key: 'icon3', - className: "text-yellow-400 mr-2 text-lg" - }, "⚠️"), - React.createElement('span', { - key: 'text3', - className: "text-yellow-300 text-sm font-medium" - }, "Partially") - ]), - React.createElement('div', { - key: 'legend-item-4', - className: "flex items-center justify-center p-3 bg-red-500/10 border border-red-500/20 rounded-lg" - }, [ - React.createElement('span', { - key: 'icon4', - className: "text-red-400 mr-2 text-lg" - }, "❌"), - React.createElement('span', { - key: 'text4', - className: "text-red-300 text-sm font-medium" - }, "No") - ]) - ]), + {/* Legend */} +
+
+ 🏆 + Category Leader +
+
+ ✅ + Excellent +
+
+ ⚠️ + Partial/Limited +
+
+ ❌ + Not Available +
+
- // Summary - React.createElement('div', { - key: 'summary', - className: "mt-8 p-6 bg-orange-500/10 border border-orange-500/20 rounded-xl max-w-4xl mx-auto" - }, [ - React.createElement('h4', { - key: 'summary-title', - className: "text-lg font-semibold text-orange-400 mb-3 flex items-center" - }, [ - React.createElement('i', { - key: 'icon', - className: 'fas fa-trophy mr-2' - }), - 'Summary of the comparison' - ]), - React.createElement('p', { - key: 'summary-text', - className: "text-secondary leading-relaxed" - }, "LockBit.chat leads in 8 out of 12 security categories, especially excelling over competitors in P2P architecture, anonymity, and metadata protection. Only Olvid surpasses it in post-quantum cryptography, while centralized solutions show significant privacy shortcomings.") - ]) - ]); - }; + {/* Legend */} +
+
+

+ + LockBit.chat v4.0 Enhanced Security Edition Summary +

+

+ LockBit.chat dominates in 11 out of 15 security categories, establishing itself as the most secure P2P messenger available. + The Enhanced Security Edition introduces revolutionary 12-layer defense architecture, Lightning Network integration, and military-grade cryptography that exceeds government and enterprise standards. +

+
+
+
🔐 Cryptographic Superiority
+

+ ECDH P-384 + AES-GCM 256 + ECDSA P-384 with non-extractable keys and 12-layer defense system +

+
+
+
⚡ Lightning Integration
+

+ First messenger with Lightning Network payments - sustainable economic model with instant satoshi transactions +

+
+
+
🌐 True P2P Architecture
+

+ Pure WebRTC connections with zero servers, impossible to censor or shutdown, complete anonymity +

+
+
+
🎭 Traffic Obfuscation
+

+ Advanced fake traffic generation, packet padding, and pattern masking defeat traffic analysis +

+
+
+
+
+ + {/* Version information */} +
+
+ 🚀 + Enhanced Security Edition v4.0 - + Active Production Release + | Next: v5.0 Post-Quantum +
+
+
+
+ ); + }; function Roadmap() { const [selectedPhase, setSelectedPhase] = React.useState(null); @@ -1864,48 +1719,47 @@ }, [ React.createElement('div', { key: 'feature1', className: "text-center p-3 sm:p-4" }, [ React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 bg-green-500/10 border border-green-500/20 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [ - React.createElement('i', { className: 'fas fa-exchange-alt accent-green' }) + React.createElement('i', { className: 'fas fa-key accent-green' }) ]), - React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "ECDH Key Exchange"), - React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Secure key exchange") + React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "ECDH P-384 Key Exchange"), + React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Military-grade elliptic curve key exchange") ]), React.createElement('div', { key: 'feature2', className: "text-center p-3 sm:p-4" }, [ React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 bg-purple-500/10 border border-purple-500/20 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [ - React.createElement('i', { className: 'fas fa-shield-alt accent-purple' }) + React.createElement('i', { className: 'fas fa-user-shield accent-purple' }) ]), - React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "Out-of-Band Verification"), - React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "MITM attack protection") + React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "MITM Protection"), + React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Out-of-band verification against attacks") ]), React.createElement('div', { key: 'feature3', className: "text-center p-3 sm:p-4" }, [ React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 bg-orange-500/10 border border-orange-500/20 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [ React.createElement('i', { className: 'fas fa-lock accent-orange' }) ]), - React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "Encryption"), - React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Encryption + Authentication") + React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "AES-GCM 256 Encryption"), + React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Authenticated encryption standard") ]), React.createElement('div', { key: 'feature4', className: "text-center p-3 sm:p-4" }, [ React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 bg-cyan-500/10 border border-cyan-500/20 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [ React.createElement('i', { className: 'fas fa-sync-alt accent-cyan' }) ]), React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "Perfect Forward Secrecy"), - React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Automatic Key Rotation") + React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Automatic key rotation every 5 minutes") ]), React.createElement('div', { key: 'feature5', className: "text-center p-3 sm:p-4" }, [ React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 bg-blue-500/10 border border-blue-500/20 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [ - React.createElement('i', { className: 'fas fa-fingerprint accent-blue' }) + React.createElement('i', { className: 'fas fa-signature accent-blue' }) ]), - React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "Digital Signatures"), - React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "ECDSA Message Verification") + React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "ECDSA P-384 Signatures"), + React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Digital signatures for message integrity") ]), React.createElement('div', { key: 'feature6', className: "text-center p-3 sm:p-4" }, [ - React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 bg-red-500/10 border border-red-500/20 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [ - React.createElement('i', { className: 'fas fa-ban accent-red' }) + React.createElement('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 bg-yellow-500/10 border border-yellow-500/20 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [ + React.createElement('i', { className: 'fas fa-bolt accent-yellow' }) ]), - React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "Interception Protection"), - React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Encrypted Data Exchange") + React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "Lightning Payments"), + React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Pay-per-session via WebLN") ]) ]), - // Wallet Logos Section React.createElement('div', { key: 'wallet-logos-section', diff --git a/src/components/ui/Header.jsx b/src/components/ui/Header.jsx index 366f7c3..302219d 100644 --- a/src/components/ui/Header.jsx +++ b/src/components/ui/Header.jsx @@ -109,7 +109,7 @@ const EnhancedMinimalHeader = ({ React.createElement('p', { key: 'subtitle', className: 'text-xs sm:text-sm text-muted hidden sm:block' - }, 'End-to-end freedom') + }, 'End-to-end freedom. v4.0.02.12') ]) ]), diff --git a/src/styles/main.css b/src/styles/main.css index 0921f2d..7f20e38 100644 --- a/src/styles/main.css +++ b/src/styles/main.css @@ -13,6 +13,10 @@ body { background-color: rgb(37 38 37) !important; } +.bg-my{ + background-color: rgb(26 26 26); +} + .bg-header { background-color: rgb(35 35 35) !important; }