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

feat(ui): add glowing border effect and improve card hover interactions

Browse Source 
- implemented glowing border effect on cards when cursor is near
- multiple cards can glow simultaneously within proximity
- smooth fade-out without flicker on mouse leave
- improved hover animation for better user experience
This commit is contained in:
lockbitchat
2025-10-02 16:52:31 -04:00
parent 6bed472e09
commit 7682f57889
11 changed files with 161 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
dist/app-boot.js vendored
View File

@@ -15231,6 +15231,58 @@ var UniqueFeatureSlider = () => {
};
window.UniqueFeatureSlider = UniqueFeatureSlider;
// src/components/ui/SecurityFeatures.jsx
var SecurityFeatures = () => {
const features = [
{ id: "feature1", color: "#00ff88", icon: "fas fa-key accent-green", title: "ECDH P-384 Key Exchange", desc: "Military-grade elliptic curve key exchange" },
{ id: "feature2", color: "#bb00ff", icon: "fas fa-user-shield accent-purple", title: "MITM Protection", desc: "Out-of-band verification against attacks" },
{ id: "feature3", color: "#ff8800", icon: "fas fa-lock accent-orange", title: "AES-GCM 256 Encryption", desc: "Authenticated encryption standard" },
{ id: "feature4", color: "#00ffff", icon: "fas fa-sync-alt accent-cyan", title: "Perfect Forward Secrecy", desc: "Automatic key rotation every 5 minutes" },
{ id: "feature5", color: "#0088ff", icon: "fas fa-signature accent-blue", title: "ECDSA P-384 Signatures", desc: "Digital signatures for message integrity" },
{ id: "feature6", color: "#ff0044", icon: "fas fa-shield-alt accent-red", title: "SAS Security", desc: "Revolutionary key exchange & MITM protection" }
];
React.useEffect(() => {
const cards = document.querySelectorAll(".card");
const radius = 200;
const handleMove = (e) => {
cards.forEach((card) => {
const rect = card.getBoundingClientRect();
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
const dx = e.clientX - cx;
const dy = e.clientY - cy;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < radius) {
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
card.style.setProperty("--x", `${x}px`);
card.style.setProperty("--y", `${y}px`);
card.classList.add("active-glow");
} else {
card.classList.remove("active-glow");
}
});
};
window.addEventListener("mousemove", handleMove);
return () => window.removeEventListener("mousemove", handleMove);
}, []);
const renderFeature = (f) => React.createElement("div", {
key: f.id,
className: "card p-3 sm:p-4 text-center",
style: { "--color": f.color }
}, [
React.createElement("div", { key: "icon", className: "w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center mx-auto mb-2 sm:mb-3 relative z-10" }, [
React.createElement("i", { className: f.icon })
]),
React.createElement("h4", { key: "title", className: "text-xs sm:text-sm font-medium text-primary mb-1 relative z-10" }, f.title),
React.createElement("p", { key: "desc", className: "text-xs text-muted leading-tight relative z-10" }, f.desc)
]);
return React.createElement("div", {
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"
}, features.map(renderFeature));
};
window.SecurityFeatures = SecurityFeatures;
// src/components/ui/ComparisonTable.jsx
var ComparisonTable = () => {
const [selectedFeature, setSelectedFeature] = React.useState(null);

6
dist/app-boot.js.map vendored
View File

File diff suppressed because one or more lines are too long

48
dist/app.js vendored
View File

@@ -452,53 +452,7 @@ var EnhancedConnectionSetup = ({
])
])
]),
React.createElement("div", {
key: "security-features",
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 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 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 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 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 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(SecurityFeatures, { key: "security-features" }),
React.createElement(UniqueFeatureSlider, { key: "unique-features-slider" }),
React.createElement(DownloadApps, { key: "download-apps" }),
React.createElement(ComparisonTable, { key: "comparison-table" }),

4
dist/app.js.map vendored
View File

File diff suppressed because one or more lines are too long