Update UX/UI landing page
This commit is contained in:
lockbitchat committed
1 parent
49347b5c78
commit
0a7a830b52
6 files changed
+279
-293
No files matched your search
+1
-1
@@ -1 +1 @@
|
||||
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media Line truncated
|
||||
*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media Line truncated
|
||||
Vendored
+110
-94
@@ -133,7 +133,7 @@ var UniqueFeatureSlider = () => {
|
||||
(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"}`
|
||||
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", {
|
||||
@@ -179,142 +179,142 @@ var ComparisonTable = () => {
|
||||
const features = [
|
||||
{
|
||||
name: "Security Architecture",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "18-layer military-grade defense system with complete ASN.1 validation" },
|
||||
signal: { status: "\u2705", detail: "Signal Protocol with double ratchet" },
|
||||
threema: { status: "\u2705", detail: "Standard security implementation" },
|
||||
session: { status: "\u2705", detail: "Modified Signal Protocol + Onion routing" }
|
||||
lockbit: { status: "trophy", detail: "18-layer military-grade defense system with complete ASN.1 validation" },
|
||||
signal: { status: "check", detail: "Signal Protocol with double ratchet" },
|
||||
threema: { status: "check", detail: "Standard security implementation" },
|
||||
session: { status: "check", detail: "Modified Signal Protocol + Onion routing" }
|
||||
},
|
||||
{
|
||||
name: "Cryptography",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "ECDH P-384 + AES-GCM 256 + ECDSA P-384" },
|
||||
signal: { status: "\u2705", detail: "Signal Protocol + Double Ratchet" },
|
||||
threema: { status: "\u2705", detail: "NaCl + XSalsa20 + Poly1305" },
|
||||
session: { status: "\u2705", detail: "Modified Signal Protocol" }
|
||||
lockbit: { status: "trophy", detail: "ECDH P-384 + AES-GCM 256 + ECDSA P-384" },
|
||||
signal: { status: "check", detail: "Signal Protocol + Double Ratchet" },
|
||||
threema: { status: "check", detail: "NaCl + XSalsa20 + Poly1305" },
|
||||
session: { status: "check", detail: "Modified Signal Protocol" }
|
||||
},
|
||||
{
|
||||
name: "Perfect Forward Secrecy",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "Auto rotation every 5 minutes or 100 messages" },
|
||||
signal: { status: "\u2705", detail: "Double Ratchet algorithm" },
|
||||
threema: { status: "\u26A0\uFE0F", detail: "Partial (group chats)" },
|
||||
session: { status: "\u2705", detail: "Session Ratchet algorithm" }
|
||||
lockbit: { status: "trophy", detail: "Auto rotation every 5 minutes or 100 messages" },
|
||||
signal: { status: "check", detail: "Double Ratchet algorithm" },
|
||||
threema: { status: "warning", detail: "Partial (group chats)" },
|
||||
session: { status: "check", detail: "Session Ratchet algorithm" }
|
||||
},
|
||||
{
|
||||
name: "Architecture",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "Pure P2P WebRTC without servers" },
|
||||
signal: { status: "\u274C", detail: "Centralized Signal servers" },
|
||||
threema: { status: "\u274C", detail: "Threema servers in Switzerland" },
|
||||
session: { status: "\u26A0\uFE0F", detail: "Onion routing via network nodes" }
|
||||
lockbit: { status: "trophy", detail: "Pure P2P WebRTC without servers" },
|
||||
signal: { status: "times", detail: "Centralized Signal servers" },
|
||||
threema: { status: "times", detail: "Threema servers in Switzerland" },
|
||||
session: { status: "warning", detail: "Onion routing via network nodes" }
|
||||
},
|
||||
{
|
||||
name: "Registration Anonymity",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "No registration required, instant anonymous channels" },
|
||||
signal: { status: "\u274C", detail: "Phone number required" },
|
||||
threema: { status: "\u2705", detail: "ID generated locally" },
|
||||
session: { status: "\u2705", detail: "Random session ID" }
|
||||
lockbit: { status: "trophy", detail: "No registration required, instant anonymous channels" },
|
||||
signal: { status: "times", detail: "Phone number required" },
|
||||
threema: { status: "check", detail: "ID generated locally" },
|
||||
session: { status: "check", detail: "Random session ID" }
|
||||
},
|
||||
{
|
||||
name: "Payment Integration",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "Lightning Network satoshis per session + WebLN" },
|
||||
signal: { status: "\u274C", detail: "No payment system" },
|
||||
threema: { status: "\u274C", detail: "No payment system" },
|
||||
session: { status: "\u274C", detail: "No payment system" }
|
||||
lockbit: { status: "trophy", detail: "Lightning Network satoshis per session + WebLN" },
|
||||
signal: { status: "times", detail: "No payment system" },
|
||||
threema: { status: "times", detail: "No payment system" },
|
||||
session: { status: "times", detail: "No payment system" }
|
||||
},
|
||||
{
|
||||
name: "Metadata Protection",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "Full metadata encryption + traffic obfuscation" },
|
||||
signal: { status: "\u26A0\uFE0F", detail: "Sealed Sender (partial)" },
|
||||
threema: { status: "\u26A0\uFE0F", detail: "Minimal metadata" },
|
||||
session: { status: "\u2705", detail: "Onion routing hides metadata" }
|
||||
lockbit: { status: "trophy", detail: "Full metadata encryption + traffic obfuscation" },
|
||||
signal: { status: "warning", detail: "Sealed Sender (partial)" },
|
||||
threema: { status: "warning", detail: "Minimal metadata" },
|
||||
session: { status: "check", detail: "Onion routing hides metadata" }
|
||||
},
|
||||
{
|
||||
name: "Traffic Obfuscation",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "Fake traffic + pattern masking + packet padding" },
|
||||
signal: { status: "\u274C", detail: "No traffic obfuscation" },
|
||||
threema: { status: "\u274C", detail: "No traffic obfuscation" },
|
||||
session: { status: "\u2705", detail: "Onion routing provides obfuscation" }
|
||||
lockbit: { status: "trophy", detail: "Fake traffic + pattern masking + packet padding" },
|
||||
signal: { status: "times", detail: "No traffic obfuscation" },
|
||||
threema: { status: "times", detail: "No traffic obfuscation" },
|
||||
session: { status: "check", detail: "Onion routing provides obfuscation" }
|
||||
},
|
||||
{
|
||||
name: "Open Source",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "100% open + auditable + MIT license" },
|
||||
signal: { status: "\u2705", detail: "Fully open" },
|
||||
threema: { status: "\u26A0\uFE0F", detail: "Only clients open" },
|
||||
session: { status: "\u2705", detail: "Fully open" }
|
||||
lockbit: { status: "trophy", detail: "100% open + auditable + MIT license" },
|
||||
signal: { status: "check", detail: "Fully open" },
|
||||
threema: { status: "warning", detail: "Only clients open" },
|
||||
session: { status: "check", detail: "Fully open" }
|
||||
},
|
||||
{
|
||||
name: "MITM Protection",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "Out-of-band verification + mutual auth + ECDSA" },
|
||||
signal: { status: "\u2705", detail: "Safety numbers verification" },
|
||||
threema: { status: "\u2705", detail: "QR code scanning" },
|
||||
session: { status: "\u26A0\uFE0F", detail: "Basic key verification" }
|
||||
lockbit: { status: "trophy", detail: "Out-of-band verification + mutual auth + ECDSA" },
|
||||
signal: { status: "check", detail: "Safety numbers verification" },
|
||||
threema: { status: "check", detail: "QR code scanning" },
|
||||
session: { status: "warning", detail: "Basic key verification" }
|
||||
},
|
||||
{
|
||||
name: "Economic Model",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "Sustainable pay-per-session model" },
|
||||
signal: { status: "\u26A0\uFE0F", detail: "Donations and grants dependency" },
|
||||
threema: { status: "\u2705", detail: "One-time app purchase" },
|
||||
session: { status: "\u26A0\uFE0F", detail: "Donations dependency" }
|
||||
lockbit: { status: "trophy", detail: "Sustainable pay-per-session model" },
|
||||
signal: { status: "warning", detail: "Donations and grants dependency" },
|
||||
threema: { status: "check", detail: "One-time app purchase" },
|
||||
session: { status: "warning", detail: "Donations dependency" }
|
||||
},
|
||||
{
|
||||
name: "Censorship Resistance",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "Impossible to block P2P + no servers to target" },
|
||||
signal: { status: "\u26A0\uFE0F", detail: "Blocked in authoritarian countries" },
|
||||
threema: { status: "\u26A0\uFE0F", detail: "May be blocked" },
|
||||
session: { status: "\u2705", detail: "Onion routing bypasses blocks" }
|
||||
lockbit: { status: "trophy", detail: "Impossible to block P2P + no servers to target" },
|
||||
signal: { status: "warning", detail: "Blocked in authoritarian countries" },
|
||||
threema: { status: "warning", detail: "May be blocked" },
|
||||
session: { status: "check", detail: "Onion routing bypasses blocks" }
|
||||
},
|
||||
{
|
||||
name: "Data Storage",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "Zero data storage - only in browser memory" },
|
||||
signal: { status: "\u26A0\uFE0F", detail: "Local database storage" },
|
||||
threema: { status: "\u26A0\uFE0F", detail: "Local + optional backup" },
|
||||
session: { status: "\u26A0\uFE0F", detail: "Local database storage" }
|
||||
lockbit: { status: "trophy", detail: "Zero data storage - only in browser memory" },
|
||||
signal: { status: "warning", detail: "Local database storage" },
|
||||
threema: { status: "warning", detail: "Local + optional backup" },
|
||||
session: { status: "warning", detail: "Local database storage" }
|
||||
},
|
||||
{
|
||||
name: "Key Security",
|
||||
lockbit: { status: "\u{1F3C6}", detail: "Non-extractable keys + hardware protection" },
|
||||
signal: { status: "\u2705", detail: "Secure key storage" },
|
||||
threema: { status: "\u2705", detail: "Local key storage" },
|
||||
session: { status: "\u2705", detail: "Secure key storage" }
|
||||
lockbit: { status: "trophy", detail: "Non-extractable keys + hardware protection" },
|
||||
signal: { status: "check", detail: "Secure key storage" },
|
||||
threema: { status: "check", detail: "Local key storage" },
|
||||
session: { status: "check", detail: "Secure key storage" }
|
||||
},
|
||||
{
|
||||
name: "Post-Quantum Roadmap",
|
||||
lockbit: { status: "\u2705", detail: "Planned v5.0 - CRYSTALS-Kyber/Dilithium" },
|
||||
signal: { status: "\u26A0\uFE0F", detail: "PQXDH in development" },
|
||||
threema: { status: "\u274C", detail: "Not announced" },
|
||||
session: { status: "\u274C", detail: "Not announced" }
|
||||
lockbit: { status: "check", detail: "Planned v5.0 - CRYSTALS-Kyber/Dilithium" },
|
||||
signal: { status: "warning", detail: "PQXDH in development" },
|
||||
threema: { status: "times", detail: "Not announced" },
|
||||
session: { status: "times", detail: "Not announced" }
|
||||
}
|
||||
];
|
||||
const getStatusIcon = (status) => {
|
||||
const statusMap = {
|
||||
"\u{1F3C6}": { icon: "\u{1F3C6}", color: "text-yellow-400" },
|
||||
"\u2705": { icon: "\u2705", color: "text-green-400" },
|
||||
"\u26A0\uFE0F": { icon: "\u26A0\uFE0F", color: "text-yellow-400" },
|
||||
"\u274C": { icon: "\u274C", color: "text-red-400" }
|
||||
"trophy": { icon: "fa-trophy", color: "accent-orange" },
|
||||
"check": { icon: "fa-check", color: "text-green-300" },
|
||||
"warning": { icon: "fa-exclamation-triangle", color: "text-yellow-300" },
|
||||
"times": { icon: "fa-times", color: "text-red-300" }
|
||||
};
|
||||
return statusMap[status] || { icon: status, color: "text-gray-400" };
|
||||
return statusMap[status] || { icon: "fa-question", color: "text-gray-400" };
|
||||
};
|
||||
const toggleFeatureDetail = (index) => {
|
||||
setSelectedFeature(selectedFeature === index ? null : index);
|
||||
};
|
||||
return /* @__PURE__ */ React.createElement("div", { className: "mt-16" }, /* @__PURE__ */ React.createElement("div", { className: "text-center mb-8" }, /* @__PURE__ */ React.createElement("h3", { className: "text-3xl font-bold text-primary mb-3" }, "Enhanced Security Edition Comparison"), /* @__PURE__ */ React.createElement("p", { className: "text-secondary max-w-2xl mx-auto mb-4" }, "Enhanced Security Edition vs leading secure messengers"), /* @__PURE__ */ React.createElement("div", { className: "inline-flex items-center px-4 py-2 bg-yellow-500/10 border border-yellow-500/20 rounded-lg" }, /* @__PURE__ */ React.createElement("span", { className: "text-yellow-400 mr-2" }, "\u{1F3C6}"), /* @__PURE__ */ React.createElement("span", { className: "text-yellow-300 text-sm font-medium" }, "Category Leader - Military-Grade Security"))), /* @__PURE__ */ React.createElement("div", { className: "max-w-7xl mx-auto" }, /* @__PURE__ */ React.createElement("div", { className: "md:hidden p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg mb-4" }, /* @__PURE__ */ React.createElement("p", { className: "text-yellow-400 text-sm text-center" }, "\u{1F4A1} Rotate your device horizontally for better viewing")), /* @__PURE__ */ React.createElement("div", { className: "overflow-x-auto custom-scrollbar" }, /* @__PURE__ */ React.createElement(
|
||||
return /* @__PURE__ */ React.createElement("div", { className: "mt-16" }, /* @__PURE__ */ React.createElement("div", { className: "text-center mb-8" }, /* @__PURE__ */ React.createElement("h3", { className: "text-3xl font-bold text-white mb-3" }, "Enhanced Security Edition Comparison"), /* @__PURE__ */ React.createElement("p", { className: "text-gray-400 max-w-2xl mx-auto mb-4" }, "Enhanced Security Edition vs leading secure messengers")), /* @__PURE__ */ React.createElement("div", { className: "max-w-7xl mx-auto" }, /* @__PURE__ */ React.createElement("div", { className: "md:hidden p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg mb-4" }, /* @__PURE__ */ React.createElement("p", { className: "text-yellow-400 text-sm text-center" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-lightbulb mr-2" }), "Rotate your device horizontally for better viewing")), /* @__PURE__ */ React.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React.createElement(
|
||||
"table",
|
||||
{
|
||||
className: "w-full border-collapse rounded-xl overflow-hidden shadow-2xl",
|
||||
style: { backgroundColor: "rgba(42, 43, 42, 0.9)" }
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", { className: "bg-my" }, /* @__PURE__ */ React.createElement("th", { className: "text-left p-4 border-b border-gray-600 text-primary font-bold min-w-[240px]" }, "Security Criterion"), messengers.map((messenger, index) => /* @__PURE__ */ React.createElement("th", { key: `messenger-${index}`, className: "text-center p-4 border-b border-gray-600 min-w-[160px]" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React.createElement("div", { className: "mb-2" }, messenger.logo), /* @__PURE__ */ React.createElement("div", { className: `text-sm font-bold ${messenger.color === "orange" ? "text-orange-400" : messenger.color === "blue" ? "text-blue-400" : messenger.color === "green" ? "text-green-400" : "text-cyan-400"}` }, messenger.name), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-400" }, messenger.type), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500 mt-1" }, messenger.version)))))),
|
||||
/* @__PURE__ */ React.createElement("thead", null, /* @__PURE__ */ React.createElement("tr", { className: "bg-black-table" }, /* @__PURE__ */ React.createElement("th", { className: "text-left p-4 border-b border-gray-600 text-white font-bold min-w-[240px]" }, "Security Criterion"), messengers.map((messenger, index) => /* @__PURE__ */ React.createElement("th", { key: `messenger-${index}`, className: "text-center p-4 border-b border-gray-600 min-w-[160px]" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center" }, /* @__PURE__ */ React.createElement("div", { className: "mb-2" }, messenger.logo), /* @__PURE__ */ React.createElement("div", { className: `text-sm font-bold ${messenger.color === "orange" ? "text-orange-400" : messenger.color === "blue" ? "text-blue-400" : messenger.color === "green" ? "text-green-400" : "text-cyan-400"}` }, messenger.name), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-400" }, messenger.type), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-gray-500 mt-1" }, messenger.version)))))),
|
||||
/* @__PURE__ */ React.createElement("tbody", null, features.map((feature, featureIndex) => /* @__PURE__ */ React.createElement(React.Fragment, { key: `feature-${featureIndex}` }, /* @__PURE__ */ React.createElement(
|
||||
"tr",
|
||||
{
|
||||
className: `border-b border-gray-700/30 hover:bg-gray-800/30 transition-all duration-200 cursor-pointer ${selectedFeature === featureIndex ? "bg-gray-800/50" : ""}`,
|
||||
className: `border-b border-gray-700/30 transition-all duration-200 cursor-pointer hover:bg-[rgb(20_20_20_/30%)] ${selectedFeature === featureIndex ? "bg-[rgb(20_20_20_/50%)]" : ""}`,
|
||||
onClick: () => toggleFeatureDetail(featureIndex)
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("td", { className: "p-4 text-primary font-semibold" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("span", null, feature.name), /* @__PURE__ */ React.createElement("i", { className: `fas fa-chevron-${selectedFeature === featureIndex ? "up" : "down"} text-xs text-gray-400 opacity-60 transition-all duration-200` }))),
|
||||
/* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("span", { className: `${getStatusIcon(feature.lockbit.status).color} text-2xl` }, getStatusIcon(feature.lockbit.status).icon)),
|
||||
/* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("span", { className: `${getStatusIcon(feature.signal.status).color} text-2xl` }, getStatusIcon(feature.signal.status).icon)),
|
||||
/* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("span", { className: `${getStatusIcon(feature.threema.status).color} text-2xl` }, getStatusIcon(feature.threema.status).icon)),
|
||||
/* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("span", { className: `${getStatusIcon(feature.session.status).color} text-2xl` }, getStatusIcon(feature.session.status).icon))
|
||||
), selectedFeature === featureIndex && /* @__PURE__ */ React.createElement("tr", { className: "border-b border-gray-700/30 bg-gradient-to-r from-gray-800/20 to-gray-900/20" }, /* @__PURE__ */ React.createElement("td", { className: "p-4 text-xs text-gray-400 font-medium" }, "Technical Details:"), /* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-orange-300 font-medium leading-relaxed max-w-32" }, feature.lockbit.detail)), /* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-blue-300 leading-relaxed max-w-32" }, feature.signal.detail)), /* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-green-300 leading-relaxed max-w-32" }, feature.threema.detail)), /* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-cyan-300 leading-relaxed max-w-32" }, feature.session.detail))))))
|
||||
)), /* @__PURE__ */ React.createElement("div", { className: "mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-5xl mx-auto" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-xl hover:bg-yellow-500/20 transition-colors" }, /* @__PURE__ */ React.createElement("span", { className: "text-yellow-400 mr-2 text-xl" }, "\u{1F3C6}"), /* @__PURE__ */ React.createElement("span", { className: "text-yellow-300 text-sm font-bold" }, "Category Leader")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center p-4 bg-green-500/10 border border-green-500/20 rounded-xl hover:bg-green-500/20 transition-colors" }, /* @__PURE__ */ React.createElement("span", { className: "text-green-400 mr-2 text-xl" }, "\u2705"), /* @__PURE__ */ React.createElement("span", { className: "text-green-300 text-sm font-bold" }, "Excellent")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-xl hover:bg-yellow-500/20 transition-colors" }, /* @__PURE__ */ React.createElement("span", { className: "text-yellow-400 mr-2 text-xl" }, "\u26A0\uFE0F"), /* @__PURE__ */ React.createElement("span", { className: "text-yellow-300 text-sm font-bold" }, "Partial/Limited")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center p-4 bg-red-500/10 border border-red-500/20 rounded-xl hover:bg-red-500/20 transition-colors" }, /* @__PURE__ */ React.createElement("span", { className: "text-red-400 mr-2 text-xl" }, "\u274C"), /* @__PURE__ */ React.createElement("span", { className: "text-red-300 text-sm font-bold" }, "Not Available"))), /* @__PURE__ */ React.createElement("div", { className: "mt-10 space-y-6 max-w-6xl mx-auto" }, /* @__PURE__ */ React.createElement("div", { className: "p-6 bg-gradient-to-r from-orange-500/10 to-yellow-500/10 border border-orange-500/20 rounded-xl" }, /* @__PURE__ */ React.createElement("h4", { className: "text-xl font-bold text-orange-400 mb-4 flex items-center" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-trophy mr-3" }), "SecureBit.chat Enhanced Security Edition Summary"), /* @__PURE__ */ React.createElement("p", { className: "text-secondary leading-relaxed text-lg mb-4" }, "SecureBit.chat dominates in 11 out of 15 security categories, establishing itself as the most secure P2P messenger available. The Enhanced Security Edition introduces revolutionary 18-layer defense architecture with complete ASN.1 validation, and military-grade cryptography that exceeds government and enterprise standards."), /* @__PURE__ */ React.createElement("div", { className: "grid md:grid-cols-2 gap-4 mt-6" }, /* @__PURE__ */ React.createElement("div", { className: "p-4 bg-orange-500/5 border border-orange-500/10 rounded-lg" }, /* @__PURE__ */ React.createElement("h5", { className: "text-orange-400 font-semibold mb-2" }, "\u{1F510} Cryptographic Superiority"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-300" }, "ECDH P-384 + AES-GCM 256 + ECDSA P-384 + Complete ASN.1 Validation with non-extractable keys and 18-layer defense system")), /* @__PURE__ */ React.createElement("div", { className: "p-4 bg-orange-500/5 border border-orange-500/10 rounded-lg" }, /* @__PURE__ */ React.createElement("h5", { className: "text-orange-400 font-semibold mb-2" }, "\u{1F310} True P2P Architecture"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-300" }, "Pure WebRTC connections with zero servers, impossible to censor or shutdown, complete anonymity")), /* @__PURE__ */ React.createElement("div", { className: "p-4 bg-orange-500/5 border border-orange-500/10 rounded-lg" }, /* @__PURE__ */ React.createElement("h5", { className: "text-orange-400 font-semibold mb-2" }, "\u{1F3AD} Traffic Obfuscation"), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-gray-300" }, "Advanced fake traffic generation, packet padding, and pattern masking defeat traffic analysis"))))), /* @__PURE__ */ React.createElement("div", { className: "mt-8 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "inline-flex items-center px-6 py-3 bg-gray-800/50 border border-gray-600/30 rounded-xl" }, /* @__PURE__ */ React.createElement("span", { className: "text-orange-400 mr-2" }, "\u{1F680}"), /* @__PURE__ */ React.createElement("span", { className: "text-gray-300 text-sm" }, "Enhanced Security Edition v4.2.12 - ECDH + DTLS + SAS - "), /* @__PURE__ */ React.createElement("span", { className: "text-orange-400 font-semibold text-sm" }, "Active Production Release"), /* @__PURE__ */ React.createElement("span", { className: "text-gray-400 text-sm ml-2" }, " | Next: v5.0 Post-Quantum")))));
|
||||
/* @__PURE__ */ React.createElement("td", { className: "p-4 text-white font-semibold" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React.createElement("span", null, feature.name), /* @__PURE__ */ React.createElement("i", { className: `fas fa-chevron-${selectedFeature === featureIndex ? "up" : "down"} text-xs text-gray-400 opacity-60 transition-all duration-200` }))),
|
||||
/* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("i", { className: `fas ${getStatusIcon(feature.lockbit.status).icon} ${getStatusIcon(feature.lockbit.status).color} text-2xl` })),
|
||||
/* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("i", { className: `fas ${getStatusIcon(feature.signal.status).icon} ${getStatusIcon(feature.signal.status).color} text-2xl` })),
|
||||
/* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("i", { className: `fas ${getStatusIcon(feature.threema.status).icon} ${getStatusIcon(feature.threema.status).color} text-2xl` })),
|
||||
/* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("i", { className: `fas ${getStatusIcon(feature.session.status).icon} ${getStatusIcon(feature.session.status).color} text-2xl` }))
|
||||
), selectedFeature === featureIndex && /* @__PURE__ */ React.createElement("tr", { className: "border-b border-gray-700/30 bg-gradient-to-r from-gray-800/20 to-gray-900/20" }, /* @__PURE__ */ React.createElement("td", { className: "p-4 text-xs text-gray-400 font-medium" }, "Technical Details:"), /* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-orange-300 font-medium leading-relaxed" }, feature.lockbit.detail)), /* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-blue-300 leading-relaxed" }, feature.signal.detail)), /* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-green-300 leading-relaxed" }, feature.threema.detail)), /* @__PURE__ */ React.createElement("td", { className: "p-4 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs text-cyan-300 leading-relaxed" }, feature.session.detail))))))
|
||||
)), /* @__PURE__ */ React.createElement("div", { className: "mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-5xl mx-auto" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center p-4 bg-orange-500/10 rounded-xl hover:bg-orange-500/40 transition-colors" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-trophy text-orange-400 mr-2 text-xl" }), /* @__PURE__ */ React.createElement("span", { className: "text-orange-300 text-sm font-bold" }, "Category Leader")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center p-4 bg-green-500/10 rounded-xl hover:bg-green-600/40 transition-colors" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-check text-green-300 mr-2 text-xl" }), /* @__PURE__ */ React.createElement("span", { className: "text-green-200 text-sm font-bold" }, "Excellent")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center p-4 bg-yellow-500/10 rounded-xl hover:bg-yellow-600/40 transition-colors" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-exclamation-triangle text-yellow-300 mr-2 text-xl" }), /* @__PURE__ */ React.createElement("span", { className: "text-yellow-200 text-sm font-bold" }, "Partial/Limited")), /* @__PURE__ */ React.createElement("div", { className: "flex items-center justify-center p-4 bg-red-500/10 rounded-xl hover:bg-red-600/40 transition-colors" }, /* @__PURE__ */ React.createElement("i", { className: "fas fa-times text-red-300 mr-2 text-xl" }), /* @__PURE__ */ React.createElement("span", { className: "text-red-200 text-sm font-bold" }, "Not Available")))));
|
||||
};
|
||||
function Roadmap() {
|
||||
const [selectedPhase, setSelectedPhase] = React.useState(null);
|
||||
@@ -552,15 +552,7 @@ function Roadmap() {
|
||||
const togglePhaseDetail = (index) => {
|
||||
setSelectedPhase(selectedPhase === index ? null : index);
|
||||
};
|
||||
return /* @__PURE__ */ React.createElement("div", { key: "roadmap-section", className: "mt-16 px-4 sm:px-0" }, /* @__PURE__ */ React.createElement("div", { key: "section-header", className: "text-center mb-12" }, /* @__PURE__ */ React.createElement("h3", { key: "title", className: "text-2xl font-semibold text-primary mb-3" }, "Development Roadmap"), /* @__PURE__ */ React.createElement("p", { key: "subtitle", className: "text-secondary max-w-2xl mx-auto mb-6" }, "Evolution of SecureBit.chat : from initial development to quantum-resistant decentralized network with complete ASN.1 validation"), /* @__PURE__ */ React.createElement(
|
||||
"div",
|
||||
{
|
||||
key: "roadmap-note",
|
||||
className: "inline-flex items-center px-4 py-2 bg-blue-500/10 border border-blue-500/20 rounded-lg"
|
||||
},
|
||||
/* @__PURE__ */ React.createElement("i", { key: "icon", className: "fas fa-rocket text-blue-400 mr-2" }),
|
||||
/* @__PURE__ */ React.createElement("span", { key: "text", className: "text-blue-300 text-sm font-medium" }, "Click on a version for details")
|
||||
)), /* @__PURE__ */ React.createElement("div", { key: "roadmap-container", className: "max-w-6xl mx-auto" }, /* @__PURE__ */ React.createElement("div", { key: "timeline", className: "relative" }, /* @__PURE__ */ React.createElement("div", { key: "phases", className: "space-y-8" }, phases.map((phase, index) => {
|
||||
return /* @__PURE__ */ React.createElement("div", { key: "roadmap-section", className: "mt-16 px-4 sm:px-0" }, /* @__PURE__ */ React.createElement("div", { key: "section-header", className: "text-center mb-12" }, /* @__PURE__ */ React.createElement("h3", { key: "title", className: "text-2xl font-semibold text-primary mb-3" }, "Development Roadmap"), /* @__PURE__ */ React.createElement("p", { key: "subtitle", className: "text-secondary max-w-2xl mx-auto mb-6" }, "Evolution of SecureBit.chat : from initial development to quantum-resistant decentralized network with complete ASN.1 validation")), /* @__PURE__ */ React.createElement("div", { key: "roadmap-container", className: "max-w-6xl mx-auto" }, /* @__PURE__ */ React.createElement("div", { key: "timeline", className: "relative" }, /* @__PURE__ */ React.createElement("div", { key: "phases", className: "space-y-8" }, phases.map((phase, index) => {
|
||||
const statusConfig = getStatusConfig(phase.status);
|
||||
const isExpanded = selectedPhase === index;
|
||||
return /* @__PURE__ */ React.createElement("div", { key: `phase-${index}`, className: "relative" }, /* @__PURE__ */ React.createElement(
|
||||
@@ -1066,13 +1058,13 @@ var EnhancedConnectionSetup = ({
|
||||
]),
|
||||
React.createElement("div", {
|
||||
key: "options",
|
||||
className: "grid md:grid-cols-2 gap-6 max-w-3xl mx-auto"
|
||||
className: "flex flex-col md:flex-row items-center justify-center gap-6 max-w-3xl mx-auto"
|
||||
}, [
|
||||
// Create Connection
|
||||
React.createElement("div", {
|
||||
key: "create",
|
||||
onClick: () => setMode("create"),
|
||||
className: "card-minimal rounded-xl p-6 cursor-pointer group"
|
||||
className: "card-minimal rounded-xl p-6 cursor-pointer group flex-1 create"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
key: "icon",
|
||||
@@ -1089,7 +1081,7 @@ var EnhancedConnectionSetup = ({
|
||||
React.createElement("p", {
|
||||
key: "description",
|
||||
className: "text-secondary text-center text-sm mb-4"
|
||||
}, "Initiate a new secure connection with encrypted exchange"),
|
||||
}, "Initiate a new secure connection"),
|
||||
React.createElement("div", {
|
||||
key: "features",
|
||||
className: "space-y-2"
|
||||
@@ -1123,11 +1115,28 @@ var EnhancedConnectionSetup = ({
|
||||
])
|
||||
])
|
||||
]),
|
||||
React.createElement("div", {
|
||||
key: "divider",
|
||||
className: "flex flex-row md:flex-col items-center gap-4 px-4 w-full md:w-auto"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
key: "line-a",
|
||||
className: "h-px flex-1 bg-gradient-to-r from-transparent via-zinc-700 to-transparent md:h-32 md:w-px md:flex-none md:bg-gradient-to-b"
|
||||
}),
|
||||
React.createElement("div", {
|
||||
key: "or-text",
|
||||
className: "text-zinc-600 text-sm font-medium px-3"
|
||||
}, "OR"),
|
||||
React.createElement("div", {
|
||||
key: "line-b",
|
||||
className: "h-px flex-1 bg-gradient-to-r from-transparent via-zinc-700 to-transparent md:h-32 md:w-px md:flex-none md:bg-gradient-to-b"
|
||||
})
|
||||
]),
|
||||
// Join Connection
|
||||
React.createElement("div", {
|
||||
key: "join",
|
||||
onClick: () => setMode("join"),
|
||||
className: "card-minimal rounded-xl p-6 cursor-pointer group"
|
||||
className: "card-minimal rounded-xl p-6 cursor-pointer group flex-1 join"
|
||||
}, [
|
||||
React.createElement("div", {
|
||||
key: "icon",
|
||||
@@ -1184,39 +1193,46 @@ var EnhancedConnectionSetup = ({
|
||||
className: "grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 max-w-6xl mx-auto mt-8"
|
||||
}, [
|
||||
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("div", { key: "icon", className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
|
||||
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 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("div", { key: "icon", className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
|
||||
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" }, "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("div", { key: "icon", className: "w-10 h-10 sm:w-12 sm:h-12 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" }, "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("div", { key: "icon", className: "w-10 h-10 sm:w-12 sm:h-12 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 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("div", { key: "icon", className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
|
||||
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" }, "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 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
|
||||
React.createElement("i", { className: "fas fa-shield-alt accent-red" })
|
||||
]),
|
||||
React.createElement("h4", { key: "title", className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "SAS Security"),
|
||||
React.createElement("p", { key: "desc", className: "text-xs text-muted leading-tight" }, "Revolutionary key exchange & MITM protection")
|
||||
])
|
||||
]),
|
||||
React.createElement(UniqueFeatureSlider, { key: "unique-features-slider" }),
|
||||
|
||||
Vendored
+2
-2
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"sources": ["../src/app.jsx"],
|
||||
"sourcesContent": ["// QRScanner will be loaded as a script\n \n // Slider Component\n const UniqueFeatureSlider = () => {\n const [currentSlide, setCurrentSlide] = React.useState(0);\n \n const slides = [\n {\n icon: \"fas fa-shield-halved\",\n color: \"orange\",\n title: \"18-Layer Military Security\",\n 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.\"\n },\n {\n icon: \"fas fa-network-wired\",\n color: \"purple\",\n title: \"Pure P2P WebRTC Architecture\",\n description: \"Direct peer-to-peer connections without any servers. Impossible to censor, block, or monitor. Complete decentralization with zero infrastructure.\"\n },\n {\n icon: \"fas fa-sync-alt\",\n color: \"green\",\n title: \"Perfect Forward Secrecy\",\n description: \"Automatic key rotation every 5 minutes or 100 messages. Non-extractable keys with hardware protection ensure past messages remain secure.\"\n },\n {\n icon: \"fas fa-user-secret\",\n color: \"cyan\",\n title: \"Advanced Traffic Obfuscation\",\n description: \"Fake traffic generation, packet padding, and pattern masking make communication indistinguishable from random noise. Defeats traffic analysis.\"\n },\n {\n icon: \"fas fa-eye-slash\",\n color: \"blue\",\n title: \"Zero Data Collection\",\n description: \"No registration, no servers, no logs. Messages exist only in browser memory. Complete anonymity with instant anonymous channels.\"\n },\n {\n icon: \"fas fa-code\",\n color: \"emerald\",\n title: \"100% Open Source Security\",\n description: \"All code is open for audit under MIT license. Uses only standard WebCrypto APIs. Cryptography runs directly in browser without server dependencies.\"\n }\n ];\n \n const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % slides.length);\n const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);\n const goToSlide = (index) => setCurrentSlide(index);\n \n React.useEffect(() => {\n const timer = setInterval(() => {\n nextSlide();\n }, 15000);\n return () => clearInterval(timer);\n }, []);\n \n return React.createElement('div', {\n className: \"mt-12\"\n }, [\n React.createElement('div', {\n key: 'header',\n className: \"text-center mb-8\"\n }, [\n React.createElement('h3', {\n key: 'title',\n className: \"text-2xl font-semibold text-primary mb-3\"\n }, 'Why SecureBit.chat is unique'),\n React.createElement('p', {\n key: 'subtitle',\n className: \"text-secondary max-w-2xl mx-auto\"\n }, 'The only messenger with military-grade cryptography')\n ]),\n \n React.createElement('div', {\n key: 'slider-container',\n className: \"relative max-w-4xl mx-auto\"\n }, [\n React.createElement('div', {\n key: 'slider-wrapper',\n className: \"overflow-hidden rounded-xl\"\n }, [\n React.createElement('div', {\n key: 'slides',\n className: \"flex transition-transform duration-500 ease-in-out\",\n style: { transform: `translateX(-${currentSlide * 100}%)` }\n }, slides.map((slide, index) =>\n React.createElement('div', {\n key: index,\n className: \"w-full flex-shrink-0 px-4\"\n }, [\n React.createElement('div', {\n key: 'slide-content',\n className: \"card-minimal rounded-xl p-8 text-center min-h-[300px] flex flex-col justiLine truncated
|
||||
"mappings": "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 truncated
|
||||
"sourcesContent": ["// QRScanner will be loaded as a script\n \n // Slider Component\n const UniqueFeatureSlider = () => {\n const [currentSlide, setCurrentSlide] = React.useState(0);\n \n const slides = [\n {\n icon: \"fas fa-shield-halved\",\n color: \"orange\",\n title: \"18-Layer Military Security\",\n 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.\"\n },\n {\n icon: \"fas fa-network-wired\",\n color: \"purple\",\n title: \"Pure P2P WebRTC Architecture\",\n description: \"Direct peer-to-peer connections without any servers. Impossible to censor, block, or monitor. Complete decentralization with zero infrastructure.\"\n },\n {\n icon: \"fas fa-sync-alt\",\n color: \"green\",\n title: \"Perfect Forward Secrecy\",\n description: \"Automatic key rotation every 5 minutes or 100 messages. Non-extractable keys with hardware protection ensure past messages remain secure.\"\n },\n {\n icon: \"fas fa-user-secret\",\n color: \"cyan\",\n title: \"Advanced Traffic Obfuscation\",\n description: \"Fake traffic generation, packet padding, and pattern masking make communication indistinguishable from random noise. Defeats traffic analysis.\"\n },\n {\n icon: \"fas fa-eye-slash\",\n color: \"blue\",\n title: \"Zero Data Collection\",\n description: \"No registration, no servers, no logs. Messages exist only in browser memory. Complete anonymity with instant anonymous channels.\"\n },\n {\n icon: \"fas fa-code\",\n color: \"emerald\",\n title: \"100% Open Source Security\",\n description: \"All code is open for audit under MIT license. Uses only standard WebCrypto APIs. Cryptography runs directly in browser without server dependencies.\"\n }\n ];\n \n const nextSlide = () => setCurrentSlide((prev) => (prev + 1) % slides.length);\n const prevSlide = () => setCurrentSlide((prev) => (prev - 1 + slides.length) % slides.length);\n const goToSlide = (index) => setCurrentSlide(index);\n \n React.useEffect(() => {\n const timer = setInterval(() => {\n nextSlide();\n }, 15000);\n return () => clearInterval(timer);\n }, []);\n \n return React.createElement('div', {\n className: \"mt-12\"\n }, [\n React.createElement('div', {\n key: 'header',\n className: \"text-center mb-8\"\n }, [\n React.createElement('h3', {\n key: 'title',\n className: \"text-2xl font-semibold text-primary mb-3\"\n }, 'Why SecureBit.chat is unique'),\n React.createElement('p', {\n key: 'subtitle',\n className: \"text-secondary max-w-2xl mx-auto\"\n }, 'The only messenger with military-grade cryptography')\n ]),\n \n React.createElement('div', {\n key: 'slider-container',\n className: \"relative max-w-4xl mx-auto\"\n }, [\n React.createElement('div', {\n key: 'slider-wrapper',\n className: \"overflow-hidden rounded-xl\"\n }, [\n React.createElement('div', {\n key: 'slides',\n className: \"flex transition-transform duration-500 ease-in-out\",\n style: { transform: `translateX(-${currentSlide * 100}%)` }\n }, slides.map((slide, index) =>\n React.createElement('div', {\n key: index,\n className: \"w-full flex-shrink-0 px-4\"\n }, [\n React.createElement('div', {\n key: 'slide-content',\n className: \"card-minimal rounded-xl p-8 text-center min-h-[300px] flex flex-col justiLine truncated
|
||||
"mappings": ";AAGQ,IAAM,sBAAsB,MAAM;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,CAAC;AAExD,QAAM,SAAS;AAAA,IACX;AAAA,MACI,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,MACI,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,MACI,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,MACI,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,MACI,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,MACI,MAAM;AAAA,MACN,OAAO;AAAA,MACP,OAAO;AAAA,MACP,aAAa;AAAA,IACjB;AAAA,EACJ;AAEA,QAAM,YAAY,MAAM,gBAAgB,CAAC,UAAU,OAAO,KAAK,OAAO,MAAM;AAC5E,QAAM,YAAY,MAAM,gBAAgB,CAAC,UAAU,OAAO,IAAI,OAAO,UAAU,OAAO,MAAM;AAC5F,QAAM,YAAY,CAAC,UAAU,gBAAgB,KAAK;AAElD,QAAM,UAAU,MAAM;AAClB,UAAM,QAAQ,YAAY,MAAM;AAC5B,gBAAU;AAAA,IACd,GAAG,IAAK;AACR,WAAO,MAAM,cAAc,KAAK;AAAA,EACpC,GAAG,CAAC,CAAC;AAEL,SAAO,MAAM,cAAc,OAAO;AAAA,IAC9B,WAAW;AAAA,EACf,GAAG;AAAA,IACC,MAAM,cAAc,OAAO;AAAA,MACvB,KAAK;AAAA,MACL,WAAW;AAAA,IACf,GAAG;AAAA,MACC,MAAM,cAAc,MAAM;AAAA,QACtB,KAAK;AAAA,QACL,WAAW;AAAA,MACf,GAAG,8BAA8B;AAAA,MACjC,MAAM,cAAc,KAAK;AAAA,QACrB,KAAK;AAAA,QACL,WAAW;AAAA,MACf,GAAG,qDAAqD;AAAA,IAC5D,CAAC;AAAA,IAED,MAAM,cAAc,OAAO;AAAA,MACvB,KAAK;AAAA,MACL,WAAW;AAAA,IACf,GAAG;AAAA,MACC,MAAM,cAAc,OAAO;AAAA,QACvB,KAAK;AAAA,QACL,WAAW;AAAA,MACf,GAAG;AAAA,QACC,MAAM,cAAc,OAAO;AAAA,UACvB,KAAK;AAAA,UACL,WAAW;AAAA,UACX,OAAO,EAAE,WAAW,eAAe,eAAe,GAAG,KAAK;AAAA,QAC9D,GAAG,OAAO;AAAA,UAAI,CAAC,OAAO,UAClB,MAAM,cAAc,OAAO;AAAA,YACvB,KAAK;AAAA,YACL,WAAW;AAAA,UACf,GAAG;AAAA,YACC,MAAM,cAAc,OAAO;AAAA,cACvB,KAAK;AAAA,cACL,WAAW;AAAA,YACf,GAAG;AAAA;AAAA,cAEC,MAAM,cAAc,KAAK;AAAA,gBACrB,KAAK;AAAA,gBACL,WAAW,GAAG,MAAM,IAAI,iGACpB,MAAM,UAAU,WAAW,oBAC3B,MAAM,UAAU,WAAW,oBAC3B,MAAM,UAAU,WAAW,oBAC3B,MAAM,UAAU,UAAU,mBAC1B,MAAM,UAAU,SAAS,kBACzB,MAAM,UAAU,SAAS,kBACzB,kBACJ;AAAA,cACJ,CAAC;AAAA;AAAA,cAGD,MAAM,cAAc,MAAM;AAAA,gBACtB,KAAK;AAAA,gBACL,WAAW;AAAA,cACf,GAAG,MAAM,KAAK;AAAA,cACd,MAAM,cAAc,KAAK;AAAA,gBACrB,KAAK;AAAA,gBACL,WAAW;AAAA,cACf,GAAG,MAAM,WAAW;AAAA,YACxB,CAAC;AAAA,UACL,CAAC;AAAA,QACL,CAAC;AAAA,MACL,CAAC;AAAA;AAAA,MAGD,MAAM,cAAc,UAAU;AAAA,QAC1B,KAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,MACf,GAAG;AAAA,QACC,MAAM,cAAc,KAAK;AAAA,UACrB,KAAK;AAAA,UACL,WAAW;AAAA,QACf,CAAC;AAAA,MACL,CAAC;AAAA,MACD,MAAM,cAAc,UAAU;AAAA,QAC1B,KAAK;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,MACf,GAAG;AAAA,QACC,MAAM,cAAc,KAAK;AAAA,UACrB,KAAK;AAAA,UACL,WAAW;AAAA,QACf,CAAC;AAAA,MACL,CAAC;AAAA,IACL,CAAC;AAAA;AAAA,IAGD,MAAM,cAAc,OAAO;AAAA,MACvB,KAAK;AAAA,MACL,WAAW;AAAA,IACf,GAAG,OAAO;AAAA,MAAI,CAAC,OAAO,UAClB,MAAM,cAAc,UAAU;AAAA,QAC1B,KAAK;AAAA,QACL,SAAS,MAAM,UAAU,KAAK;AAAA,QAC9B,WAAW,8CACP,UAAU,eACJ,wCACA,oEACV;AAAA,MACJ,GAAG;AAAA;AAAA,QAEC,MAAM,cAAc,OAAO;AAAA,UACvB,KAAK;AAAA,UACL,WAAW;AAAA,QACf,GAAG,MAAM,KAAK;AAAA,MAClB,CAAC;AAAA,IACL,CAAC;AAAA,EACL,CAAC;AACL;AAEQ,IAAM,kBAAkB,MAAM;AAC9B,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,MAAM,SAAS,IAAI;AAEjE,QAAM,aAAa;AAAA,IACf;AAAA,MACA,MAAM;AAAA,MACN,MAAM,oCAAC,SAAI,WAAU,sGACb,oCAAC,OAAE,WAAU,wCAAuC,CACpD;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,MACA,MAAM;AAAA,MACN,MACI,oCAAC,SAAI,WAAU,WAAU,SAAQ,qBAAoB,OAAM,gCAC3D,oCAAC,UAAK,WAAU,iBAAgB,GAAE,qJAAoJ,GACtL,oCAAC,UAAK,WAAU,cAAa,GAAE,8FAA6F,CAC5H;AAAA,MAEJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,MACA,MAAM;AAAA,MACN,MACI,oCAAC,SAAI,WAAU,WAAU,SAAQ,qBAAoB,OAAM,gCAC3D,oCAAC,UAAK,OAAM,UAAS,QAAO,UAAS,IAAG,SAAQ,MAAK,WAAU,GAC/D,oCAAC,UAAK,MAAK,WAAU,GAAE,4fAA2f,GAClhB,oCAAC,YAAO,IAAG,SAAQ,IAAG,SAAQ,GAAE,QAAO,MAAK,WAAU,GACtD,oCAAC,YAAO,IAAG,SAAQ,IAAG,SAAQ,GAAE,QAAO,MAAK,WAAU,GACtD,oCAAC,YAAO,IAAG,SAAQ,IAAG,SAAQ,GAAE,QAAO,MAAK,WAAU,CACtD;AAAA,MAEJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,IACP;AAAA,IACA;AAAA,MACA,MAAM;AAAA,MACN,MACI,oCAAC,SAAI,WAAU,WAAU,SAAQ,iBAAgB,OAAM,gCACvD,oCAAC,UAAK,OAAM,QAAO,QAAO,QAAO,MAAK,WAAU,GAChD,oCAAC,UAAK,MAAK,WAAU,GAAE,ogFAAmgF,CAC1hF;AAAA,MAEJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,OAAO;AAAA,IACP;AAAA,EACJ;AAEA,QAAM,WAAW;AAAA,IACb;AAAA,MACA,MAAM;AAAA,MACN,SAAS,EAAE,QAAQ,UAAU,QAAQ,wEAAwE;AAAA,MAC7G,QAAQ,EAAE,QAAQ,SAAS,QAAQ,sCAAsC;AAAA,MACzE,SAAS,EAAE,QAAQ,SAAS,QAAQ,mCAAmC;AAAA,MACvE,SAAS,EAAE,QAAQ,SAAS,QAAQ,2CAA2C;AAAA,IAC/E;AAAA,IACA;AAAA,MACA,MAAM;AAAA,MACN,SAAS,EAAE,QAAQ,UAAU,QAAQ,yCAAyC;AAAA,MAC9E,QAAQ,EAAE,QAAQ,SAAS,QAAQ,mCAAmC;AAAA,MACtE,SAAS,EAAE,QAAQ,SAAS,QAAQ,6BAA6B;AAAA,MACjE,SAAS,EAAE,QAAQ,SAAS,QAAQ,2BAA2B;AAAA,IAC/D;AAAA,IACA;AAAA,MACA,MAAM;AAAA,MACN,SAAS,EAAE,QAAQ,UAAU,QAAQ,gDAAgD;AAAA,MACrF,QAAQ,EAAE,QAAQ,SAAS,QAAQ,2BAA2B;AAAA,MAC9D,SAAS,EAAE,QAAQ,WAAW,QAAQ,wBAAwB;AAAA,MAC9D,SAAS,EAAE,QAAQ,SAAS,QAAQ,4BAA4B;AAAA,IAChE;AAAA,IACA;AAAA,MACA,MAAM;AAAA,MACN,SAAS,EAAE,QAAQ,UAAU,QAAQ,kCAAkC;AAAA,MACvE,QAAQ,EAAE,QAAQ,SAAS,QAAQ,6BAA6B;AAAA,MAChE,SAAS,EAAE,QAAQ,SAAS,QAAQ,iCAAiC;AAAA,MACrE,SAAS,EAAE,QAAQ,WAAW,QAAQ,kCAAkC;AAAA,IACxE;AAAA,IACA;AAAA,MACA,MAAM;AAAA,MACN,SAAS,EAAE,QAAQ,UAAU,QAAQ,uDAAuD;AAAA,MAC5F,QAAQ,EAAE,QAAQ,SAAS,QAAQ,wBAAwB;AAAA,MAC3D,SAAS,EAAE,QAAQ,SAAS,QAAQ,uBAAuB;AAAA,MAC3D,SAAS,EAAE,QAAQ,SAAS,QAAQ,oBAAoB;AAAA,IACxD;AAAA,IACA;AAAA,MACA,MAAM;AAAA,MACN,SAASLine truncated
|
||||
"names": ["markAnswerCreated", "offerData", "generateQRCode", "renderNext"]
|
||||
}
|
||||
+145
-188
@@ -153,8 +153,8 @@
|
||||
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'
|
||||
? '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
|
||||
@@ -167,11 +167,9 @@
|
||||
]);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const ComparisonTable = () => {
|
||||
const [selectedFeature, setSelectedFeature] = React.useState(null);
|
||||
|
||||
|
||||
const messengers = [
|
||||
{
|
||||
name: "SecureBit.chat",
|
||||
@@ -222,166 +220,161 @@
|
||||
color: "cyan",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const features = [
|
||||
{
|
||||
name: "Security Architecture",
|
||||
lockbit: { status: "🏆", detail: "18-layer military-grade defense system with complete ASN.1 validation" },
|
||||
signal: { status: "✅", detail: "Signal Protocol with double ratchet" },
|
||||
threema: { status: "✅", detail: "Standard security implementation" },
|
||||
session: { status: "✅", detail: "Modified Signal Protocol + Onion routing" },
|
||||
lockbit: { status: "trophy", detail: "18-layer military-grade defense system with complete ASN.1 validation" },
|
||||
signal: { status: "check", detail: "Signal Protocol with double ratchet" },
|
||||
threema: { status: "check", detail: "Standard security implementation" },
|
||||
session: { status: "check", detail: "Modified Signal Protocol + Onion routing" },
|
||||
},
|
||||
{
|
||||
name: "Cryptography",
|
||||
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" },
|
||||
session: { status: "✅", detail: "Modified Signal Protocol" },
|
||||
lockbit: { status: "trophy", detail: "ECDH P-384 + AES-GCM 256 + ECDSA P-384" },
|
||||
signal: { status: "check", detail: "Signal Protocol + Double Ratchet" },
|
||||
threema: { status: "check", detail: "NaCl + XSalsa20 + Poly1305" },
|
||||
session: { status: "check", detail: "Modified Signal Protocol" },
|
||||
},
|
||||
{
|
||||
name: "Perfect Forward Secrecy",
|
||||
lockbit: { status: "🏆", detail: "Auto rotation every 5 minutes or 100 messages" },
|
||||
signal: { status: "✅", detail: "Double Ratchet algorithm" },
|
||||
threema: { status: "⚠️", detail: "Partial (group chats)" },
|
||||
session: { status: "✅", detail: "Session Ratchet algorithm" },
|
||||
lockbit: { status: "trophy", detail: "Auto rotation every 5 minutes or 100 messages" },
|
||||
signal: { status: "check", detail: "Double Ratchet algorithm" },
|
||||
threema: { status: "warning", detail: "Partial (group chats)" },
|
||||
session: { status: "check", detail: "Session Ratchet algorithm" },
|
||||
},
|
||||
{
|
||||
name: "Architecture",
|
||||
lockbit: { status: "🏆", detail: "Pure P2P WebRTC without servers" },
|
||||
signal: { status: "❌", detail: "Centralized Signal servers" },
|
||||
threema: { status: "❌", detail: "Threema servers in Switzerland" },
|
||||
session: { status: "⚠️", detail: "Onion routing via network nodes" },
|
||||
lockbit: { status: "trophy", detail: "Pure P2P WebRTC without servers" },
|
||||
signal: { status: "times", detail: "Centralized Signal servers" },
|
||||
threema: { status: "times", detail: "Threema servers in Switzerland" },
|
||||
session: { status: "warning", detail: "Onion routing via network nodes" },
|
||||
},
|
||||
{
|
||||
name: "Registration Anonymity",
|
||||
lockbit: { status: "🏆", detail: "No registration required, instant anonymous channels" },
|
||||
signal: { status: "❌", detail: "Phone number required" },
|
||||
threema: { status: "✅", detail: "ID generated locally" },
|
||||
session: { status: "✅", detail: "Random session ID" },
|
||||
lockbit: { status: "trophy", detail: "No registration required, instant anonymous channels" },
|
||||
signal: { status: "times", detail: "Phone number required" },
|
||||
threema: { status: "check", detail: "ID generated locally" },
|
||||
session: { status: "check", 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" },
|
||||
lockbit: { status: "trophy", detail: "Lightning Network satoshis per session + WebLN" },
|
||||
signal: { status: "times", detail: "No payment system" },
|
||||
threema: { status: "times", detail: "No payment system" },
|
||||
session: { status: "times", detail: "No payment system" },
|
||||
},
|
||||
{
|
||||
name: "Metadata Protection",
|
||||
lockbit: { status: "🏆", detail: "Full metadata encryption + traffic obfuscation" },
|
||||
signal: { status: "⚠️", detail: "Sealed Sender (partial)" },
|
||||
threema: { status: "⚠️", detail: "Minimal metadata" },
|
||||
session: { status: "✅", detail: "Onion routing hides metadata" },
|
||||
lockbit: { status: "trophy", detail: "Full metadata encryption + traffic obfuscation" },
|
||||
signal: { status: "warning", detail: "Sealed Sender (partial)" },
|
||||
threema: { status: "warning", detail: "Minimal metadata" },
|
||||
session: { status: "check", 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" },
|
||||
lockbit: { status: "trophy", detail: "Fake traffic + pattern masking + packet padding" },
|
||||
signal: { status: "times", detail: "No traffic obfuscation" },
|
||||
threema: { status: "times", detail: "No traffic obfuscation" },
|
||||
session: { status: "check", detail: "Onion routing provides obfuscation" },
|
||||
},
|
||||
{
|
||||
name: "Open Source",
|
||||
lockbit: { status: "🏆", detail: "100% open + auditable + MIT license" },
|
||||
signal: { status: "✅", detail: "Fully open" },
|
||||
threema: { status: "⚠️", detail: "Only clients open" },
|
||||
session: { status: "✅", detail: "Fully open" },
|
||||
lockbit: { status: "trophy", detail: "100% open + auditable + MIT license" },
|
||||
signal: { status: "check", detail: "Fully open" },
|
||||
threema: { status: "warning", detail: "Only clients open" },
|
||||
session: { status: "check", detail: "Fully open" },
|
||||
},
|
||||
{
|
||||
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" },
|
||||
lockbit: { status: "trophy", detail: "Out-of-band verification + mutual auth + ECDSA" },
|
||||
signal: { status: "check", detail: "Safety numbers verification" },
|
||||
threema: { status: "check", detail: "QR code scanning" },
|
||||
session: { status: "warning", detail: "Basic key verification" },
|
||||
},
|
||||
{
|
||||
name: "Economic Model",
|
||||
lockbit: { status: "🏆", detail: "Sustainable pay-per-session model" },
|
||||
signal: { status: "⚠️", detail: "Donations and grants dependency" },
|
||||
threema: { status: "✅", detail: "One-time app purchase" },
|
||||
session: { status: "⚠️", detail: "Donations dependency" },
|
||||
lockbit: { status: "trophy", detail: "Sustainable pay-per-session model" },
|
||||
signal: { status: "warning", detail: "Donations and grants dependency" },
|
||||
threema: { status: "check", detail: "One-time app purchase" },
|
||||
session: { status: "warning", detail: "Donations dependency" },
|
||||
},
|
||||
{
|
||||
name: "Censorship Resistance",
|
||||
lockbit: { status: "🏆", detail: "Impossible to block P2P + no servers to target" },
|
||||
signal: { status: "⚠️", detail: "Blocked in authoritarian countries" },
|
||||
threema: { status: "⚠️", detail: "May be blocked" },
|
||||
session: { status: "✅", detail: "Onion routing bypasses blocks" },
|
||||
lockbit: { status: "trophy", detail: "Impossible to block P2P + no servers to target" },
|
||||
signal: { status: "warning", detail: "Blocked in authoritarian countries" },
|
||||
threema: { status: "warning", detail: "May be blocked" },
|
||||
session: { status: "check", detail: "Onion routing bypasses blocks" },
|
||||
},
|
||||
{
|
||||
name: "Data Storage",
|
||||
lockbit: { status: "🏆", detail: "Zero data storage - only in browser memory" },
|
||||
signal: { status: "⚠️", detail: "Local database storage" },
|
||||
threema: { status: "⚠️", detail: "Local + optional backup" },
|
||||
session: { status: "⚠️", detail: "Local database storage" },
|
||||
lockbit: { status: "trophy", detail: "Zero data storage - only in browser memory" },
|
||||
signal: { status: "warning", detail: "Local database storage" },
|
||||
threema: { status: "warning", detail: "Local + optional backup" },
|
||||
session: { status: "warning", detail: "Local database storage" },
|
||||
},
|
||||
{
|
||||
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" },
|
||||
lockbit: { status: "trophy", detail: "Non-extractable keys + hardware protection" },
|
||||
signal: { status: "check", detail: "Secure key storage" },
|
||||
threema: { status: "check", detail: "Local key storage" },
|
||||
session: { status: "check", 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 announced" },
|
||||
session: { status: "❌", detail: "Not announced" },
|
||||
lockbit: { status: "check", detail: "Planned v5.0 - CRYSTALS-Kyber/Dilithium" },
|
||||
signal: { status: "warning", detail: "PQXDH in development" },
|
||||
threema: { status: "times", detail: "Not announced" },
|
||||
session: { status: "times", detail: "Not announced" },
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
const getStatusIcon = (status) => {
|
||||
const statusMap = {
|
||||
"🏆": { icon: "🏆", color: "text-yellow-400" },
|
||||
"✅": { icon: "✅", color: "text-green-400" },
|
||||
"⚠️": { icon: "⚠️", color: "text-yellow-400" },
|
||||
"❌": { icon: "❌", color: "text-red-400" },
|
||||
"trophy": { icon: "fa-trophy", color: "accent-orange" },
|
||||
"check": { icon: "fa-check", color: "text-green-300" },
|
||||
"warning": { icon: "fa-exclamation-triangle", color: "text-yellow-300" },
|
||||
"times": { icon: "fa-times", color: "text-red-300" },
|
||||
};
|
||||
return statusMap[status] || { icon: status, color: "text-gray-400" };
|
||||
return statusMap[status] || { icon: "fa-question", color: "text-gray-400" };
|
||||
};
|
||||
|
||||
|
||||
const toggleFeatureDetail = (index) => {
|
||||
setSelectedFeature(selectedFeature === index ? null : index);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="mt-16">
|
||||
{/* Title */}
|
||||
<div className="text-center mb-8">
|
||||
<h3 className="text-3xl font-bold text-primary mb-3">
|
||||
<h3 className="text-3xl font-bold text-white mb-3">
|
||||
Enhanced Security Edition Comparison
|
||||
</h3>
|
||||
<p className="text-secondary max-w-2xl mx-auto mb-4">
|
||||
<p className="text-gray-400 max-w-2xl mx-auto mb-4">
|
||||
Enhanced Security Edition vs leading secure messengers
|
||||
</p>
|
||||
<div className="inline-flex items-center px-4 py-2 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
|
||||
<span className="text-yellow-400 mr-2">🏆</span>
|
||||
<span className="text-yellow-300 text-sm font-medium">
|
||||
Category Leader - Military-Grade Security
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Table container */}
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* Mobile Alert */}
|
||||
<div className="md:hidden p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg mb-4">
|
||||
<p className="text-yellow-400 text-sm text-center">
|
||||
💡 Rotate your device horizontally for better viewing
|
||||
<i className="fas fa-lightbulb mr-2"></i>
|
||||
Rotate your device horizontally for better viewing
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Table */}
|
||||
<div className="overflow-x-auto custom-scrollbar">
|
||||
<div className="overflow-x-auto">
|
||||
<table
|
||||
className="w-full border-collapse rounded-xl overflow-hidden shadow-2xl"
|
||||
style={{ backgroundColor: "rgba(42, 43, 42, 0.9)" }}
|
||||
>
|
||||
{/* Table Header */}
|
||||
<thead>
|
||||
<tr className="bg-my">
|
||||
<th className="text-left p-4 border-b border-gray-600 text-primary font-bold min-w-[240px]">
|
||||
<tr className="bg-black-table">
|
||||
<th className="text-left p-4 border-b border-gray-600 text-white font-bold min-w-[240px]">
|
||||
Security Criterion
|
||||
</th>
|
||||
{messengers.map((messenger, index) => (
|
||||
@@ -403,66 +396,58 @@
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
{/* Table body*/}
|
||||
|
||||
{/* Table body */}
|
||||
<tbody>
|
||||
{features.map((feature, featureIndex) => (
|
||||
<React.Fragment key={`feature-${featureIndex}`}>
|
||||
<tr
|
||||
className={`border-b border-gray-700/30 hover:bg-gray-800/30 transition-all duration-200 cursor-pointer ${
|
||||
selectedFeature === featureIndex ? 'bg-gray-800/50' : ''
|
||||
}`}
|
||||
onClick={() => toggleFeatureDetail(featureIndex)}
|
||||
className={`border-b border-gray-700/30 transition-all duration-200 cursor-pointer hover:bg-[rgb(20_20_20_/30%)] ${
|
||||
selectedFeature === featureIndex ? 'bg-[rgb(20_20_20_/50%)]' : ''
|
||||
}`}
|
||||
onClick={() => toggleFeatureDetail(featureIndex)}
|
||||
>
|
||||
<td className="p-4 text-primary font-semibold">
|
||||
<td className="p-4 text-white font-semibold">
|
||||
<div className="flex items-center justify-between">
|
||||
<span>{feature.name}</span>
|
||||
<i className={`fas fa-chevron-${selectedFeature === featureIndex ? 'up' : 'down'} text-xs text-gray-400 opacity-60 transition-all duration-200`} />
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
<span className={`${getStatusIcon(feature.lockbit.status).color} text-2xl`}>
|
||||
{getStatusIcon(feature.lockbit.status).icon}
|
||||
</span>
|
||||
<i className={`fas ${getStatusIcon(feature.lockbit.status).icon} ${getStatusIcon(feature.lockbit.status).color} text-2xl`} />
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
<span className={`${getStatusIcon(feature.signal.status).color} text-2xl`}>
|
||||
{getStatusIcon(feature.signal.status).icon}
|
||||
</span>
|
||||
<i className={`fas ${getStatusIcon(feature.signal.status).icon} ${getStatusIcon(feature.signal.status).color} text-2xl`} />
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
<span className={`${getStatusIcon(feature.threema.status).color} text-2xl`}>
|
||||
{getStatusIcon(feature.threema.status).icon}
|
||||
</span>
|
||||
<i className={`fas ${getStatusIcon(feature.threema.status).icon} ${getStatusIcon(feature.threema.status).color} text-2xl`} />
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
<span className={`${getStatusIcon(feature.session.status).color} text-2xl`}>
|
||||
{getStatusIcon(feature.session.status).icon}
|
||||
</span>
|
||||
<i className={`fas ${getStatusIcon(feature.session.status).icon} ${getStatusIcon(feature.session.status).color} text-2xl`} />
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
{/* Details */}
|
||||
{selectedFeature === featureIndex && (
|
||||
<tr className="border-b border-gray-700/30 bg-gradient-to-r from-gray-800/20 to-gray-900/20">
|
||||
<td className="p-4 text-xs text-gray-400 font-medium">Technical Details:</td>
|
||||
<td className="p-4 text-center">
|
||||
<div className="text-xs text-orange-300 font-medium leading-relaxed max-w-32">
|
||||
<div className="text-xs text-orange-300 font-medium leading-relaxed">
|
||||
{feature.lockbit.detail}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
<div className="text-xs text-blue-300 leading-relaxed max-w-32">
|
||||
<div className="text-xs text-blue-300 leading-relaxed">
|
||||
{feature.signal.detail}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
<div className="text-xs text-green-300 leading-relaxed max-w-32">
|
||||
<div className="text-xs text-green-300 leading-relaxed">
|
||||
{feature.threema.detail}
|
||||
</div>
|
||||
</td>
|
||||
<td className="p-4 text-center">
|
||||
<div className="text-xs text-cyan-300 leading-relaxed max-w-32">
|
||||
<div className="text-xs text-cyan-300 leading-relaxed">
|
||||
{feature.session.detail}
|
||||
</div>
|
||||
</td>
|
||||
@@ -473,74 +458,32 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Legend */}
|
||||
<div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 max-w-5xl mx-auto">
|
||||
<div className="flex items-center justify-center p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-xl hover:bg-yellow-500/20 transition-colors">
|
||||
<span className="text-yellow-400 mr-2 text-xl">🏆</span>
|
||||
<span className="text-yellow-300 text-sm font-bold">Category Leader</span>
|
||||
<div className="flex items-center justify-center p-4 bg-orange-500/10 rounded-xl hover:bg-orange-500/40 transition-colors">
|
||||
<i className="fas fa-trophy text-orange-400 mr-2 text-xl"></i>
|
||||
<span className="text-orange-300 text-sm font-bold">Category Leader</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center p-4 bg-green-500/10 border border-green-500/20 rounded-xl hover:bg-green-500/20 transition-colors">
|
||||
<span className="text-green-400 mr-2 text-xl">✅</span>
|
||||
<span className="text-green-300 text-sm font-bold">Excellent</span>
|
||||
|
||||
<div className="flex items-center justify-center p-4 bg-green-500/10 rounded-xl hover:bg-green-600/40 transition-colors">
|
||||
<i className="fas fa-check text-green-300 mr-2 text-xl"></i>
|
||||
<span className="text-green-200 text-sm font-bold">Excellent</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-xl hover:bg-yellow-500/20 transition-colors">
|
||||
<span className="text-yellow-400 mr-2 text-xl">⚠️</span>
|
||||
<span className="text-yellow-300 text-sm font-bold">Partial/Limited</span>
|
||||
<div className="flex items-center justify-center p-4 bg-yellow-500/10 rounded-xl hover:bg-yellow-600/40 transition-colors">
|
||||
<i className="fas fa-exclamation-triangle text-yellow-300 mr-2 text-xl"></i>
|
||||
<span className="text-yellow-200 text-sm font-bold">Partial/Limited</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-center p-4 bg-red-500/10 border border-red-500/20 rounded-xl hover:bg-red-500/20 transition-colors">
|
||||
<span className="text-red-400 mr-2 text-xl">❌</span>
|
||||
<span className="text-red-300 text-sm font-bold">Not Available</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Legend */}
|
||||
<div className="mt-10 space-y-6 max-w-6xl mx-auto">
|
||||
<div className="p-6 bg-gradient-to-r from-orange-500/10 to-yellow-500/10 border border-orange-500/20 rounded-xl">
|
||||
<h4 className="text-xl font-bold text-orange-400 mb-4 flex items-center">
|
||||
<i className="fas fa-trophy mr-3" />
|
||||
SecureBit.chat Enhanced Security Edition Summary
|
||||
</h4>
|
||||
<p className="text-secondary leading-relaxed text-lg mb-4">
|
||||
SecureBit.chat dominates in 11 out of 15 security categories, establishing itself as the most secure P2P messenger available.
|
||||
The Enhanced Security Edition introduces revolutionary 18-layer defense architecture with complete ASN.1 validation, and military-grade cryptography that exceeds government and enterprise standards.
|
||||
</p>
|
||||
<div className="grid md:grid-cols-2 gap-4 mt-6">
|
||||
<div className="p-4 bg-orange-500/5 border border-orange-500/10 rounded-lg">
|
||||
<h5 className="text-orange-400 font-semibold mb-2">🔐 Cryptographic Superiority</h5>
|
||||
<p className="text-sm text-gray-300">
|
||||
ECDH P-384 + AES-GCM 256 + ECDSA P-384 + Complete ASN.1 Validation with non-extractable keys and 18-layer defense system
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-orange-500/5 border border-orange-500/10 rounded-lg">
|
||||
<h5 className="text-orange-400 font-semibold mb-2">🌐 True P2P Architecture</h5>
|
||||
<p className="text-sm text-gray-300">
|
||||
Pure WebRTC connections with zero servers, impossible to censor or shutdown, complete anonymity
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 bg-orange-500/5 border border-orange-500/10 rounded-lg">
|
||||
<h5 className="text-orange-400 font-semibold mb-2">🎭 Traffic Obfuscation</h5>
|
||||
<p className="text-sm text-gray-300">
|
||||
Advanced fake traffic generation, packet padding, and pattern masking defeat traffic analysis
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Version information */}
|
||||
<div className="mt-8 text-center">
|
||||
<div className="inline-flex items-center px-6 py-3 bg-gray-800/50 border border-gray-600/30 rounded-xl">
|
||||
<span className="text-orange-400 mr-2">🚀</span>
|
||||
<span className="text-gray-300 text-sm">Enhanced Security Edition v4.2.12 - ECDH + DTLS + SAS - </span>
|
||||
<span className="text-orange-400 font-semibold text-sm">Active Production Release</span>
|
||||
<span className="text-gray-400 text-sm ml-2"> | Next: v5.0 Post-Quantum</span>
|
||||
<div className="flex items-center justify-center p-4 bg-red-500/10 rounded-xl hover:bg-red-600/40 transition-colors">
|
||||
<i className="fas fa-times text-red-300 mr-2 text-xl"></i>
|
||||
<span className="text-red-200 text-sm font-bold">Not Available</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
function Roadmap() {
|
||||
const [selectedPhase, setSelectedPhase] = React.useState(null);
|
||||
@@ -792,15 +735,6 @@
|
||||
<p key="subtitle" className="text-secondary max-w-2xl mx-auto mb-6">
|
||||
Evolution of SecureBit.chat : from initial development to quantum-resistant decentralized network with complete ASN.1 validation
|
||||
</p>
|
||||
<div
|
||||
key="roadmap-note"
|
||||
className="inline-flex items-center px-4 py-2 bg-blue-500/10 border border-blue-500/20 rounded-lg"
|
||||
>
|
||||
<i key="icon" className="fas fa-rocket text-blue-400 mr-2" />
|
||||
<span key="text" className="text-blue-300 text-sm font-medium">
|
||||
Click on a version for details
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div key="roadmap-container" className="max-w-6xl mx-auto">
|
||||
@@ -1325,13 +1259,13 @@
|
||||
|
||||
React.createElement('div', {
|
||||
key: 'options',
|
||||
className: "grid md:grid-cols-2 gap-6 max-w-3xl mx-auto"
|
||||
className: "flex flex-col md:flex-row items-center justify-center gap-6 max-w-3xl mx-auto"
|
||||
}, [
|
||||
// Create Connection
|
||||
React.createElement('div', {
|
||||
key: 'create',
|
||||
onClick: () => setMode('create'),
|
||||
className: "card-minimal rounded-xl p-6 cursor-pointer group"
|
||||
className: "card-minimal rounded-xl p-6 cursor-pointer group flex-1 create"
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'icon',
|
||||
@@ -1348,7 +1282,7 @@
|
||||
React.createElement('p', {
|
||||
key: 'description',
|
||||
className: "text-secondary text-center text-sm mb-4"
|
||||
}, "Initiate a new secure connection with encrypted exchange"),
|
||||
}, "Initiate a new secure connection"),
|
||||
React.createElement('div', {
|
||||
key: 'features',
|
||||
className: "space-y-2"
|
||||
@@ -1382,12 +1316,28 @@
|
||||
])
|
||||
])
|
||||
]),
|
||||
|
||||
React.createElement('div', {
|
||||
key: 'divider',
|
||||
className: "flex flex-row md:flex-col items-center gap-4 px-4 w-full md:w-auto"
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'line-a',
|
||||
className: "h-px flex-1 bg-gradient-to-r from-transparent via-zinc-700 to-transparent md:h-32 md:w-px md:flex-none md:bg-gradient-to-b"
|
||||
}),
|
||||
React.createElement('div', {
|
||||
key: 'or-text',
|
||||
className: "text-zinc-600 text-sm font-medium px-3"
|
||||
}, "OR"),
|
||||
React.createElement('div', {
|
||||
key: 'line-b',
|
||||
className: "h-px flex-1 bg-gradient-to-r from-transparent via-zinc-700 to-transparent md:h-32 md:w-px md:flex-none md:bg-gradient-to-b"
|
||||
})
|
||||
]),
|
||||
// Join Connection
|
||||
React.createElement('div', {
|
||||
key: 'join',
|
||||
onClick: () => setMode('join'),
|
||||
className: "card-minimal rounded-xl p-6 cursor-pointer group"
|
||||
className: "card-minimal rounded-xl p-6 cursor-pointer group flex-1 join"
|
||||
}, [
|
||||
React.createElement('div', {
|
||||
key: 'icon',
|
||||
@@ -1446,40 +1396,47 @@
|
||||
className: "grid grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 max-w-6xl mx-auto mt-8"
|
||||
}, [
|
||||
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('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
|
||||
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 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('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
|
||||
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" }, "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('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 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" }, "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('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 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 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('div', { key: 'icon', className: "w-10 h-10 sm:w-12 sm:h-12 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
|
||||
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" }, "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 rounded-lg flex items-center justify-center mx-auto mb-2 sm:mb-3" }, [
|
||||
React.createElement('i', { className: 'fas fa-shield-alt accent-red' })
|
||||
]),
|
||||
React.createElement('h4', { key: 'title', className: "text-xs sm:text-sm font-medium text-primary mb-1" }, "SAS Security"),
|
||||
React.createElement('p', { key: 'desc', className: "text-xs text-muted leading-tight" }, "Revolutionary key exchange & MITM protection")
|
||||
]),
|
||||
]),
|
||||
|
||||
React.createElement(UniqueFeatureSlider, { key: 'unique-features-slider' }),
|
||||
|
||||
@@ -175,14 +175,14 @@ class PWAInstallPrompt {
|
||||
const buttonIcon = this.isIOSSafari() ? 'fas fa-share' : 'fas fa-download';
|
||||
|
||||
this.installButton.innerHTML = `
|
||||
<i class="${buttonIcon} transition-transform group-hover:scale-110"></i>
|
||||
<span class="font-medium">${buttonText}</span>
|
||||
<div class="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<button class="close-btn absolute -top-2 -left-2 w-6 h-6 bg-red-500 hover:bg-red-600 rounded-full text-white text-xs flex items-center justify-center transition-colors">
|
||||
×
|
||||
</button>
|
||||
<i class="${buttonIcon} transition-transform group-hover:scale-110"></i>
|
||||
<span class="font-medium">${buttonText}</span>
|
||||
<button class="close-btn absolute -top-2 -right-2 w-6 h-6 bg-red-500 hover:bg-red-600 rounded-full text-white text-xs flex items-center justify-center transition-colors">
|
||||
×
|
||||
</button>
|
||||
`;
|
||||
|
||||
|
||||
this.installButton.addEventListener('click', (e) => {
|
||||
if (!e.target.classList.contains('close-btn')) {
|
||||
this.handleInstallClick();
|
||||
|
||||
+15
-2
@@ -27,10 +27,23 @@ body {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.card-minimal.rounded-xl.p-6.cursor-pointer.group.flex-1.create {
|
||||
background-color: #60a5fa08;
|
||||
}
|
||||
|
||||
.card-minimal.rounded-xl.p-6.cursor-pointer.group.flex-1.join {
|
||||
background-color: #34d39908;
|
||||
}
|
||||
|
||||
tr.bg-black-table {
|
||||
background-color: #1c1c1c;
|
||||
}
|
||||
|
||||
|
||||
/* Text styles */
|
||||
.text-primary { color: #f1f5f9; }
|
||||
.text-secondary { color: #9ca3af; }
|
||||
.text-muted { color: #6b7280; }
|
||||
.text-secondary { color: #b6b6b6; }
|
||||
.text-muted { color: #818080; }
|
||||
|
||||
/* Accent colors */
|
||||
.accent-orange { color: #fb923c; }
|
||||
|
||||
Reference in new issue
Block a user